// Better Login styling.
// -----------------------------------------------------------------------------
@import "../../defaults";   // Global component defaults.

.page {
  min-height: 100vh;
}

#auth-box {
  @include padding($navbar-brand-height 0 0);

  #top-part {
    .page-title {
      width: max-content;
      margin-right: -0.2rem;
      margin-left: -0.2rem;
    }
  }

  #middle-part {
    @include padding-top(1rem);
  }

  .back-link {
    @include padding(1rem 0 0);
  }

  #bottom-part {
    @include font-size(0.75rem);
    @include padding(2rem 0 0);
    text-align: center;
  }

  .user-form {
    .form-control {
      max-width: 100%;
    }
  }

}

.separator {
  @include margin(2rem 0);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: calc((4 * var(3rem)) + (3 * var(3rem)));

  .separator-start,
  .separator-end {
    height: calc(1em / 16);
    background-color: var(--bs-gray-200);
    width: 100%;
  }

  .separator-text {
    @include margin(0 3rem);
    font-style: normal;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1rem;
    color: var(--bs-gray-400);
  }
}

.social-auth-login-hint {
  @include margin(1rem 0);
}

.account-auth-login-hint {
  @include margin(1rem 0);
}
