lila/ui/bits/css/_auth.scss

#main-wrap {
  min-height: calc(95vh - #{$site-header-outer-height} - 4em);
}

.site-buttons .signin-or-signup,
#clinput {
  display: none;
}

@media (max-width: at-most($medium)) {
  .site-title,
  .site-title-nav__donate {
    display: none;
  }
}

.checklist {
  font-size: 1.5em;
  font-weight: 700;

  li {
    list-style: disc inside;
  }
}

$auth-input-radius: 16px;
$auth-input-bg: rgba(26, 22, 16, 1);

.auth {
  width: 100%;
  margin: 0 auto;
  height: min-content;
  border-radius: $auth-input-radius;
  border: $border;

  &__brand {
    @extend %flex-column;

    align-items: center;
    gap: 0.5rem;
    margin: -0.5em 0 2em 0;

    @media (width >= $large) {
      display: none;
    }

    &__logo {
      display: block;
      width: 64px;
      height: 64px;
      background: center no-repeat url('../logo/lichess-white.svg');
      background-size: contain;

      @include if-light {
        background-image: url('../logo/lichess.svg');
      }
    }

    &__name {
      font-size: 1.5rem;
    }
  }

  .auth-tabs {
    @extend %flex-center-nowrap;

    margin-bottom: 2rem;
    border-bottom: $border;

    a {
      flex: 1 1 auto;
      text-align: center;
      font-size: 1.5em;
      padding: 0.5em 0.2em;
      color: $c-font;
      border-bottom: 2px solid transparent;

      @include transition(color border-color, 0.25s);

      &:hover {
        border-bottom-color: $m-accent--fade-70;
      }

      &:focus-visible {
        outline-offset: -2px;
      }

      &.active {
        font-weight: bold;
        color: $c-accent;
        border-bottom-color: $c-accent;
      }
    }
  }

  @media (width >= $x-small) {
    width: 40em;
  }

  .form-group {
    position: relative;

    &:has(+ .password-complexity) {
      margin-bottom: 1rem;
    }
  }

  .password-complexity {
    margin-top: 1em;
  }

  .password-generator {
    margin-top: 0.5em;
    text-align: right;

    button {
      @extend %box-radius;

      color: $c-accent;
      font-size: 0.9em;
      padding: 0.5em 1em;

      &:hover {
        background: $m-accent--fade-70;
      }
    }
  }

  .form-group input {
    height: 50px;
    font-size: 16px;
    border: none;
    border-radius: $auth-input-radius;
    background: $auth-input-bg;

    @include if-light {
      background: rgba(245, 242, 237, 1);
    }

    &:focus-visible {
      outline: $outline;
      outline-offset: -2px;
    }
  }

  .form-group.is-invalid input {
    outline: 2px solid $c-error;
    outline-offset: -2px;
  }

  .password-wrapper,
  .text-wrapper {
    position: relative;
  }

  .password-reveal,
  .text-clear {
    position: absolute;
    inset-inline-end: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    border-radius: $box-radius-size;

    &:focus-visible {
      outline: $outline;
      outline-offset: 2px;
    }
  }

  .password-reveal {
    float: none;
    margin: 0;
  }

  .text-clear {
    display: none;
    opacity: 0.7;

    &:hover {
      opacity: 1;
    }

    &.show {
      display: block;
    }
  }

  .auth-global-error {
    color: $c-error;
    margin-top: 1em;

    .text {
      display: flex;
      align-items: center;
      gap: 0.2em;

      &::before {
        font-size: 1.3em;
      }
    }
  }

  a:focus-visible {
    outline: $outline;
  }

  .button {
    width: 100%;
    padding: 1.3rem;
    border-radius: $auth-input-radius;
  }

  .submit.button {
    font-size: 1.125rem;
    font-weight: bold;
    text-transform: none;
  }

  .magic-link {
    font-size: 1.125rem;
    font-weight: bold;
    text-transform: none;
  }

  .or-separator {
    display: flex;
    align-items: center;
    margin: 2.5rem 0 1.5rem;

    &::before,
    &::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid $c-border;
    }

    span {
      padding: 0 1em;
      color: $c-font-dim;
      font-size: 0.85em;
    }
  }

  &-login {
    .form-group:has(+ .password-reset) {
      margin-bottom: 0.5em;
    }

    .password-reset {
      text-align: end;
      font-size: 1rem;
    }

    .login-remember {
      margin: 1em 0;

      .form-check__label {
        height: 1.4em;
        width: 1.4em;

        &::after {
          width: 0.7em;
          height: 0.35em;
          border-width: 2px;
          border-color: $c-bg-box;
        }
      }

      .form-label {
        font-weight: normal;
      }
    }

    &__blanked {
      @extend %box-radius;

      margin-bottom: 2em;
      padding: 1em 2em;
      background: $c-bg-zebra;
      border: 2px solid $c-bad;
    }
  }

  &-signup--simple .agreement {
    display: none;
  }

  .agreement {
    .form-group {
      margin-bottom: 1rem;
    }

    label {
      font-weight: normal;
    }
  }

  .cf-turnstile {
    margin: 1em 0;
  }

  .button.submit {
    .button__loader .spinner {
      width: 1.3em;
      height: 1.3em;
    }

    .button__ready {
      display: block;
    }

    .button__verifying {
      justify-content: center;
      gap: 1ch;
      display: none;
    }

    &:disabled {
      .button__ready {
        display: none;
      }

      .button__verifying {
        display: flex;
      }
    }
  }
}

/* presumably the keyboard is up */
@media (height <= $x-short) {
  #top {
    display: none;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .password-complexity {
    margin-top: 1rem;
  }
}