@use "../colors" as c
@use "./rooms" as rooms

$icon-size: 48px
$icon-padding: 8px
$base-width: $icon-size + $icon_padding * 4
$out-width: $base-width + rooms.$list-width

.c-groups
  position: relative
  width: $base-width
  flex-shrink: 0
  font-size: 24px
  font-weight: 500

  &__display
    background-color: c.$darkest
    overflow: hidden
    width: $base-width
    position: absolute
    left: 0
    top: 0
    bottom: 0
    right: 0
    transition: width ease-out 0.12s
    scrollbar-width: thin
    scrollbar-color: c.$milder c.$darkest

    &:not(&--closed):hover
      width: $out-width
      overflow-y: auto

  &__container
    width: $out-width
    padding: $icon-padding

.c-group
  display: flex
  align-items: center
  padding: $icon-padding / 2 $icon-padding
  cursor: pointer
  border-radius: 8px

  &:hover
    background-color: c.$darker

  &__icon
    width: $icon-size
    height: $icon-size
    background-color: c.$mild
    border-radius: 50%
    margin-right: $icon-padding * 2
    flex-shrink: 0

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