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

.room-view {
  @extend .cp-fx__column;
  background-color: var(--bg-surface);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 999;
  box-shadow: none;

  transition: transform 200ms var(--fluid-slide-down);

  &--dropped {
    transform: translateY(calc(100% - var(--header-height)));
    border-radius: var(--bo-radius) var(--bo-radius) 0 0;
    box-shadow: var(--bs-popup);
  }

  & .header {
    @include screen.smallerThan(mobileBreakpoint) {
      padding: 0 var(--sp-tight);
    }
  }

  &__content-wrapper {
    @extend .cp-fx__item-one;
    @extend .cp-fx__column;
  }

  &__scrollable {
    @extend .cp-fx__item-one;
    position: relative;
  }

  &__sticky {
    position: relative;
    background: var(--bg-surface);
  }
  &__editor {
    padding: 0 var(--sp-normal);
  }
}