//
// User authentication pages
// ----------------------------
//

@import "../global";

:root {
  --user-authenticate-max-width: 40rem;
  --user-authenticate-margin: 3rem auto;
  --user-authenticate-padding-y: 3rem;
  --user-authenticate-padding-x: 8rem;
  --user-authenticate-background-color: var(--beo-white);
  --user-authenticate-footer-margin-top: var(--user-authenticate-padding-y);
  --user-authenticate-footer-background-color: var(--beo-primary);
  --user-authenticate-footer-color: var(--beo-white);
  --user-authenticate-footer-text-font-size: 1.25rem;
  --user-authenticate-border: 1px solid var(--beo-border-color);
  --user-authenticate-border-radius: 12px;
  --user-authenticate-box-shadow: 0 8px 32px rgb(0 0 0 / 10%);
}

// Page overrides.
.page-title {
  font-size: 2rem;
  font-weight: $font-weight-bold;
}

.site-logo {
  svg {
    max-width: 90vw;
  }
}

.user-authenticate {
  &__main {
    max-width: var(--user-authenticate-max-width);
    margin: var(--user-authenticate-margin);
    padding: var(--user-authenticate-padding-y) var(--user-authenticate-padding-x) 0;
    background-color: var(--user-authenticate-background-color);
    border: var(--user-authenticate-border);
    border-radius: var(--user-authenticate-border-radius);
    box-shadow: var(--user-authenticate-box-shadow);
    overflow: hidden;

    @include media-breakpoint-down(md) {
      padding: 1rem 1rem 0;
      margin-inline: 1rem;
    }

    .btn {
      width: 100%;
    }
  }

  &__footer {
    text-align: center;
    color: var(--user-authenticate-footer-color);
    background-color: var(--user-authenticate-footer-background-color);
    margin-top: var(--user-authenticate-footer-margin-top);
    margin-inline: calc(var(--user-authenticate-padding-x) * -1);
    padding: calc(var(--user-authenticate-padding-y) / 2) var(--user-authenticate-padding-x)
      var(--user-authenticate-padding-y);

    p {
      font-size: var(--user-authenticate-footer-text-font-size);
      margin-bottom: 2rem;
    }
  }

  // Focused styles
  &__focused {
    --user-authenticate-margin: 3rem auto;
    --user-authenticate-background-color: var(--beo-light);

    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    justify-content: center;
    padding-block: 3rem;

    &--bg {
      // Default background image (fallback when no custom image is set)
      background-image: url("../../images/focused-login-bg.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    header {
      text-align: center;

      svg path {
        fill: var(--beo-white);
      }
    }

    .user-authenticate__main {
      border: 0;
    }

    .user-authenticate__inner {
      position: relative;
      z-index: 2;
    }

    // Background overlay
    &::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(0 0 0 / 50%);
      z-index: 1;
    }
  }
}

// Form specific styles
.user-login-form {
  .form-item-pass {
    margin-bottom: 0;
  }

  .forgot-password-link {
    display: block;
    text-align: right;
    margin-bottom: var(--form-item-spacing);
    font-size: $font-size-sm;
    margin-top: 0.25rem;
    font-style: italic;
  }
}

// Password strength
.password-strength__title,
.password-confirm-message,
.password-strength__text,
.password-suggestions {
  display: inline;
  font-size: 0.875rem;
  color: $form-text-color;
}

.password-strength {
  &__meter {
    height: 0.25rem;
    margin-top: 0.75rem;
    background-color: var(--beo-light);
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
  }

  &__indicator {
    width: 0;
    height: 100%;
    background-color: var(--beo-danger);
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    position: relative;

    // Strength levels with colors
    &.is-weak {
      background-color: var(--beo-danger);
    }

    &.is-fair {
      background-color: var(--beo-warning);
    }

    &.is-good {
      background-color: var(--beo-info);
    }

    &.is-strong {
      background-color: var(--beo-success);
    }

    // Animated fill effect
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgb(255 255 255 / 30%) 50%,
        transparent 100%
      );
      animation: shimmer 2s infinite;
    }
  }
}

.password-confirm-match {
  visibility: hidden;

  &.match {
    visibility: visible;
    color: var(--beo-success);
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }

  &.no-match {
    visibility: visible;
    color: var(--beo-danger);
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }
}

.password-suggestions {
  display: block;
  margin-block: calc(var(--form-minimal-input-spacing) * -1)
    calc(var(--form-minimal-input-spacing) / 2);
  padding: 1rem;
  background-color: var(--beo-light);
  border-radius: 0.25rem;
  font-size: $font-size-sm;
  color: $form-text-color;

  ul {
    margin-block: 0.5rem 0;
  }
}

// Shimmer animation
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
