@use "../colors" as c

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

.c-rooms
  background-color: c.$darker
  padding: $icon-padding
  width: $list-width
  font-size: 20px
  overflow-y: scroll
  scrollbar-width: thin
  scrollbar-color: c.$milder c.$darker

.c-room
  display: flex
  align-items: center
  padding: $icon-padding
  cursor: pointer

  &:hover
    background-color: c.$mild
    border-radius: 8px

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

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