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

.public-rooms {
  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
  margin-top: var(--sp-extra-tight);

  &__form {
    display: flex;
    align-items: flex-end;

    & .btn-primary {
      padding: {
        top: 11px;
        bottom: 11px;
      }
    }
  }
  &__input-wrapper {
    flex: 1;
    min-width: 0;

    display: flex;
    @include dir.side(margin, 0, var(--sp-normal));

    & > div:first-child {
      flex: 1;
      min-width: 0;

      & .input {
        @include dir.prop(border-radius,
          var(--bo-radius) 0 0 var(--bo-radius),
          0 var(--bo-radius) var(--bo-radius) 0,
        );
      }
    }

    & > div:last-child .input {
      width: 120px;
      @include dir.prop(border-left-width, 0, 1px);
      @include dir.prop(border-right-width, 1px, 0);
      @include dir.prop(border-radius,
        0 var(--bo-radius) var(--bo-radius) 0,
        var(--bo-radius) 0 0 var(--bo-radius),
      );
    }
  }

  &__search-status {
    margin-top: var(--sp-extra-loose);
    margin-bottom: var(--sp-tight);
    & .donut-spinner {
      margin: 0 var(--sp-tight);
    }

    .try-join-with-alias {
      margin-top: var(--sp-normal);
    }
  }
  &__search-error {
    color: var(--bg-danger);
  }
  &__content {
    border-top: 1px solid var(--bg-surface-border);
  }
  &__view-more {
    margin-top: var(--sp-loose);
    @include dir.side(margin, calc(var(--av-normal) + var(--sp-normal)), 0);
  }
  
  & .room-tile {
    margin-top: var(--sp-normal);
    &__options {
      align-self: flex-end;
    }
  }
}

.try-join-with-alias {
  display: flex;
  align-items: center;
  
  & >.text:nth-child(2) {
    margin: 0 var(--sp-normal);
  }
}