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

.shortcut-spaces {
  height: 100%;
  .dialog__content-container {
    padding: 0;
    padding-bottom: 80px;
    @include dir.side(padding, var(--sp-extra-tight), 0);

    & > .text-b1 {
      padding: 0 var(--sp-extra-tight);
    }
  }
  
  &__header {
    margin-top: var(--sp-extra-tight);
    padding: var(--sp-extra-tight);
    text-transform: uppercase;
  }

  .room-selector {
    margin: 0 var(--sp-extra-tight);
  }
  .room-selector__options {
    display: flex;
    .checkbox {
      margin: 0 6px;
    }
  }

  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--sp-normal);
    background-color: var(--bg-surface);
    border-top: 1px solid var(--bg-surface-border);
    display: flex;
    align-items: center;
  
    & > .text {
      @extend .cp-fx__item-one;
      padding: 0 var(--sp-tight);
    }
  
    & > button {
      @include dir.side(margin, var(--sp-normal), 0);
    }
  }
}