@use '../../partials/flex';
@use '../../partials/dir';
@use '../../partials/text';

.room-category {
  &__header,
  &__toggle {
    display: flex;
    align-items: center;
  }
  &__header {
    margin-top: var(--sp-extra-tight);

    & .ic-btn {
      padding: var(--sp-ultra-tight);
      border-radius: 4px;
      @include dir.side(margin, 0, 5px);
      & .ic-raw {
        width: 16px;
        height: 16px;
        background-color: var(--ic-surface-low);
      }
    }
  }
  &__toggle {
    @extend .cp-fx__item-one;
    padding: var(--sp-extra-tight) var(--sp-tight);
    cursor: pointer;
    
    & .ic-raw {
      flex-shrink: 0;
      width: 12px;
      height: 12px;
      background-color: var(--ic-surface-low);
      @include dir.side(margin, 0, var(--sp-ultra-tight));
    }
    & .text {
      text-transform: uppercase;
      @extend .cp-txt__ellipsis;
    }
    &:hover .text {
      color: var(--tc-surface-normal);
    }
  }

  &__content:first-child {
    margin-top: var(--sp-extra-tight);
  }
  
  & .room-selector {
    width: calc(100% - var(--sp-extra-tight));
    @include dir.side(margin, auto, 0);
  }
}