@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: 22px
  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
    box-sizing: border-box

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

  &: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
    transition: border-radius ease-out 0.12s

  &--active &__icon
    border-radius: 28%

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

  &__number
    position: absolute
    right: 240px
    bottom: 0px
    background: #ddd
    color: #000
    font-size: 14px
    line-height: 1
    padding: 3px 4px
    border-radius: 7px
    border: 3px solid c.$darkest
    opacity: 0
    transform: translate(6px, 6px)
    transition: transform 0.15s ease-out, opacity 0.15s ease-out
    pointer-events: none

    @at-root .c-group:hover &
      border-color: c.$darker

    &--active
      opacity: 1
      transform: translate(0px, 0px)

.c-group-marker
  position: absolute
  top: 5px
  opacity: 0
  transform: translateY(8px)
  transition: transform ease 0.12s, opacity ease-out 0.12s
  height: $icon-size - 2px
  width: 6px
  background-color: #ccc
  border-radius: 0px 6px 6px 0px