@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;

.forgotPassword {
  width: 100%;
  max-width: 400px;
  padding: $spacing-lg;

  &__card {
    @include card-base;
    padding: $spacing-xxxl;
  }

  &__header {
    text-align: center;
    margin-bottom: $spacing-xxl;
  }

  &__logo {
    font-size: 48px;
    margin-bottom: $spacing-base;
  }

  &__icon {
    @include flex-center;
    width: 64px;
    height: 64px;
    margin: 0 auto $spacing-base;
    border-radius: $border-radius-round;
    background-color: rgba($primary-color, 0.1);
    color: $primary-color;

    svg {
      width: 32px;
      height: 32px;
    }
  }

  &__title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    color: $text-primary;
    margin: 0 0 $spacing-sm;
  }

  &__subtitle {
    font-size: $font-size-sm;
    color: $text-secondary;
    margin: 0;
    line-height: $line-height-loose;
  }

  &__form {
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
  }

  &__actions {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
  }

  &__footer {
    text-align: center;
    margin-top: $spacing-xl;
  }

  &__link {
    @include flex-center;
    gap: $spacing-xs;
    font-size: $font-size-sm;
    color: $text-secondary;
    @include transition-fast;

    &:hover {
      color: $primary-color;
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }
}
