.public-rooms {
  margin: 0 var(--sp-normal);
  margin-right: 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;
    margin-right: var(--sp-normal);
    [dir=rtl] & {
      margin-right: 0;
      margin-left: var(--sp-normal);
    }

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

      & .input {
        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
        [dir=rtl] & {
          border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
        }
      }
    }

    & > div:last-child .input {
      width: 120px;
      border-left-width: 0;
      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
      [dir=rtl] & {
        border-left-width: 1px;
        border-right-width: 0;
        border-radius: 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);
    margin-left: calc(var(--av-normal) + var(--sp-normal));
    [dir=rtl] & {
      margin-left: 0;
      margin-right: calc(var(--av-normal) + var(--sp-normal));
    }
  }
  
  & .room-tile {
    margin-top: var(--sp-normal);
    &__options {
      align-self: flex-end;
    }
  }

  [dir=rtl] & {
    margin: {
      left: var(--sp-extra-tight);
      right: var(--sp-normal);
    }
  }
}

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