.login-modal {
  // making ".thead" small, but not its affiliated ".tbody"
  thead th {
    padding: $table-cell-padding-sm;
  }

  &__active-places {
    &__actions {
      display: flex;
      gap: space-x(3.5);
    }
  }
}

//////////////////////////////////:

.login-modal-form {
  $cta-width: 200px;
  $form-width: 520px;

  &__title {
    position: relative;
    background-color: $border-color;
    padding: $card-spacer-y $card-spacer-x;
    text-align: center;

    // (?) dirty negative margins to overlap the ".modal-body" paddings
    margin-top: -$modal-inner-padding;
    margin-left: -$modal-inner-padding;
    margin-right: -$modal-inner-padding;

    &__return {
      @include centered;

      position: absolute;
      left: space-x(3.5);
    }

    &__text {
      font-family: $font-family-monospace;
      font-size: 20px;
      font-weight: bold;
    }
  }

  &__separator {
    padding: $card-spacer-y calc(2* #{$card-spacer-x});
    position: relative;

    &__text {
      @include centered;

      position: absolute;
      display: inline-block;
      padding-left: space-x(4);
      padding-right: space-x(4);
      font-family: $headings-font-family;
      font-size: 24px;
      background-color: $modal-content-bg;
    }
  }

  &__request-access {
    margin-top: calc(3 * #{$card-spacer-y});
    margin-left: auto;
    margin-right: auto;
    margin-bottom: $card-spacer-y;
    padding: $btn-padding-y-lg $btn-padding-x-lg;
    width: $cta-width;
    display: block;
    font-weight: bold;
  }

  &__log-in {
    padding: $btn-padding-y-lg $btn-padding-x-lg;
    width: $cta-width;
    margin-bottom: calc(2 * #{$card-spacer-y});
    margin-left: auto;
    margin-right: auto;
    margin-top: $card-spacer-y;
    display: block;
    font-weight: bold;
  }

  &__form {
    margin: 0 auto;
    width: $form-width;
  }

  &__error {
    margin-bottom: $form-group-margin-bottom;
    color: $danger;
    text-align: center;
  }
}

//////////////////////////////////////////////////////////

.forgot-password-form {
  $cta-width: 200px;
  $form-width: 520px;

  &__title {
    position: relative;
    background-color: $border-color;
    padding: $card-spacer-y $card-spacer-x;
    text-align: center;

    // (?) dirty negative margins to overlap the ".modal-body" paddings
    margin-top: -$modal-inner-padding;
    margin-left: -$modal-inner-padding;
    margin-right: -$modal-inner-padding;

    &__return {
      @include centered;

      position: absolute;
      left: space-x(3.5);
    }

    &__text {
      font-family: $font-family-monospace;
      font-size: 20px;
      font-weight: bold;
    }
  }

  &__subtitle {
    padding-top: calc(2 * #{$card-spacer-y});
    padding-left: calc(2* #{$card-spacer-x});
    padding-right: calc(2* #{$card-spacer-x});
    padding-bottom: $card-spacer-y;
    text-align: center;
    font-family: $headings-font-family;
    font-size: 24px;
  }

  &__submit {
    padding: $btn-padding-y-lg $btn-padding-x-lg;
    width: $cta-width;
    margin-bottom: calc(2 * #{$card-spacer-y});
    margin-left: auto;
    margin-right: auto;
    margin-top: $card-spacer-y;
    display: block;
    font-weight: bold;
  }

  &__form {
    margin: 0 auto;
    width: $form-width;
  }

  &__error {
    margin-bottom: $form-group-margin-bottom;
    color: $danger;
    text-align: center;
  }

  &__success {
    margin-bottom: $form-group-margin-bottom;
    color: $success;
    text-align: center;
  }
}
