.role-picker 
  transition: opacity 0.3s ease-in-out
  opacity: 1
  
  &.hidden 
    opacity: 0

  &__categories
    display: flex
    align-items: flex-start
    flex-wrap: wrap
    flex-direction: row
    margin-top: -5px;
    padding-top: 5px;

  &__category
    // flex: 1 3 33%
    box-sizing: border-box
    background-color: var(--c-1)
    padding: 15px
    margin: 10px
    min-width: 220px - 30px

  &__header
    display: flex
    align-items: center
    justify-content: left
    color: var(--c-7)

    &.sticky
      position: sticky
      top: 0px
      background-color: var(--c-3)
      z-index: 10


    svg
      transition: transform 0.05s ease-in-out
      transform: translateZ(0)
      &:hover
        transform: translateZ(0) scale(1.1)
        color: var(--c-9)

    h3 
      margin: 0
      margin-right: 10px

  &__spacer
    flex: 1

  &__actions
    opacity: 1
    transition: opacity 0.3s ease-in-out
    padding: 10px

    button
      margin-left: 5px

    &.hidden
      opacity: 0
      // display: none
  
  &__msg-editor
    background-color: rgba(0,0,0,0.2)
    border-color: rgba(0,0,0,0.1)
    color: var(--c-white)
    margin: 10px 0

    &:focus, &:active
      color: var(--c-white)  
      background-color: rgba(0,0,0,0.2)
      border-color: var(--c-7)