@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 - 20px

.c-groups
  position: relative
  width: $base-width

  &__display
    background-color: c.$darkest
    overflow: hidden
    width: $base-width
    position: absolute
    left: 0
    top: 0
    bottom: 0
    right: 0

    &:not(&--closed):hover
      width: $out-width

  &__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: #999
    border-radius: 50%
    margin-right: $icon-padding * 2
    flex-shrink: 0

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