@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  ngx-room-selector {
    width: 70%;
    border-right: 2px solid nb-theme(separator);
    background: url('../../../../assets/images/square_pattern.svg') repeat;
    background-size: 75px;

    @include nb-for-theme(cosmic) {
      background-image: url('../../../../assets/images/square_pattern_cosmic.svg');
    }

    @include nb-for-theme(corporate) {
      background: none;
      border-right-color: nb-theme(tabs-separator);
    }
  }

  ngx-player {
    width: 30%;
  }

  nb-card {
    display: flex;
    flex-direction: row;
  }

  ngx-room-selector {
    display: flex;
    flex-direction: column;
    flex: 1;

    /deep/ .room-selector {
      display: flex;
      align-items: center;
      justify-items: center;
      flex: 1;
      margin: 0 auto;
      width: 90%;
      max-width: 650px;
      padding-bottom: 1rem;
    }
  }

  @include media-breakpoint-down(md) {
    &.expanded ngx-room-selector {
      display: none;
    }

    ngx-room-selector, ngx-player {
      width: 100%;
      border: none;
    }

    nb-card {
      flex-direction: column;
      justify-content: space-between;

      .collapse {
        display: inline-block;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 3rem;
        color: nb-theme(color-fg);

        &:focus {
          outline: none;
        }
      }
    }
  }
}