.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
