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

.room-search {
  &__form {
    & div:nth-child(2) {
      display: flex;
      align-items: flex-end;
      padding: var(--sp-normal);;
      
      & .input-container {
        @extend .cp-fx__item-one;
        @include dir.side(margin, 0, var(--sp-normal));
      }
      & button {
        height: 46px;
      }
    }
    & .context-menu__header {
      margin-bottom: 0;
    }
    & > .text {
      padding: 0 var(--sp-normal) var(--sp-tight);
    }
  }

  &__help {
    height: 248px;
    @extend .cp-fx__column--c-c;

    & .ic-raw {
      opacity: .5;
    }
    .text {
      margin-top: var(--sp-normal);
    }
  }
  &__more {
    margin-bottom: var(--sp-normal);
    @extend .cp-fx__row--c-c;
    button {
      width: 100%;
    }
  }
  &__result-item {
    padding: var(--sp-tight) var(--sp-normal);
    display: flex;
    align-items: flex-start;

    .message {
      @include dir.side(margin, 0, var(--sp-normal));
      @extend .cp-fx__item-one;
      padding: 0;
      &:hover {
        background-color: transparent;
      }
      & .message__time {
        flex: 0;
      }
    }
  }
}