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

.room-profile {
  
  &__content {
    @extend .cp-fx__row;
    & .avatar-container {
      min-width: var(--av-large);
    }
  }

  &__display {
    align-self: flex-end;
    @include dir.side(margin, var(--sp-loose), 0);

    & > div:first-child {
      @extend .cp-fx__row--s-c;
      & > .text {
        @include dir.side(margin, 0, var(--sp-extra-tight));
      }
    }

    & > *:not(:first-child) {
      margin-top: var(--sp-ultra-tight);
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
  
  &__edit-form {
    @extend .cp-fx__item-one;
    @include dir.side(margin, var(--sp-loose), 0);

    & .input-container {
      margin-bottom: var(--sp-extra-tight);
    }

    & > .text {
      margin-bottom: var(--sp-tight);
    }
    
    & > *:last-child {
      @extend .cp-fx__item-one;
      @extend .cp-fx__row;
      margin-top: var(--sp-tight);
      
      .btn-primary {
        @include dir.side(margin, 0, var(--sp-tight));
      }
    }
  }
}