@use "../colors" as c

$list-width: 240px
$icon-size: 32px
$icon-padding: 8px

.c-rooms
  background-color: c.$darker
  padding: $icon-padding
  width: $list-width
  font-size: 18px
  font-weight: 500
  overflow-y: auto
  scrollbar-width: thin
  scrollbar-color: c.$darkest c.$darker
  flex-shrink: 0

.c-room
  display: flex
  align-items: center
  padding: $icon-padding * 0.75 $icon-padding
  margin: $icon-padding * 0.25 0
  cursor: pointer
  border-radius: 8px

  &:not(&--active):hover
    background-color: c.$mild

  &--active
    background-color: c.$milder

  &__icon
    width: $icon-size
    height: $icon-size
    margin-right: $icon-padding
    border-radius: 50%
    flex-shrink: 0

    &--no-icon
      background-color: #bbb

  &__name
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    flex: 1

  &__number
    flex-shrink: 0
    line-height: 1
    padding: 4px 5px
    border-radius: 5px
    font-size: 14px
    pointer-events: none

    &--none
      display: none

    &--unreads
      background-color: #ddd
      color: #111

    &--notifications
      background-color: #ffac4b
      color: #000