@use "../../../styles/mixins.scss";

// Shared Auth Header Styles
@mixin auth-header {
  text-align: center;
  margin-bottom: 1.5rem;

  @include mixins.respond-below(sm) {
    margin-bottom: 1.25rem;
  }

  h2 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--hi-text);
    letter-spacing: -0.02em;

    @include mixins.respond-below(sm) {
      font-size: 1.5rem;
    }
  }

  p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--hi-color-gray-dark);
    line-height: 1.6;

    @include mixins.respond-below(sm) {
      font-size: 0.875rem;
    }

    a {
      color: var(--mantine-color-secondary-5);
      font-weight: 600;
      transition: color 0.2s ease;

      &:hover {
        color: var(--mantine-color-secondary-7);
      }
    }
  }
}

// Shared Auth Card Base Styles
@mixin auth-card {
  background: white;
  border-radius: var(--hi-radius-xl);
  padding: 2rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--hi-color-gray-2);

  @include mixins.respond-below(sm) {
    padding: 1.5rem;
    border-radius: var(--hi-radius-lg);
  }
}

// Shared Input Styles
@mixin auth-inputs {
  :global(.mantine-TextInput-input),
  :global(.mantine-PasswordInput-input),
  :global(.mantine-Select-input) {
    border-radius: var(--hi-radius-lg);
    border: 1.5px solid var(--hi-color-gray-2);
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    background: var(--hi-color-gray);

    @include mixins.respond-below(sm) {
      padding: 0.625rem 0.875rem;
      font-size: 1rem; // Prevent zoom on iOS
    }

    &:focus {
      border-color: var(--mantine-color-secondary-5);
      box-shadow: 0 0 0 3px var(--mantine-color-secondary-1);
      background: white;
    }

    &::placeholder {
      color: var(--hi-color-gray-dark);
    }

    &:disabled {
      background: var(--hi-color-gray);
      color: var(--hi-color-gray-dark);
    }
  }

  :global(.mantine-InputWrapper-label) {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--hi-text);
    margin-bottom: 0.375rem;
  }
}

// Shared Button Styles
@mixin auth-button($margin-top: 0) {
  :global(.mantine-Button-root) {
    height: 46px;
    border-radius: var(--hi-radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    border: none;

    @if $margin-top != 0 {
      margin-top: $margin-top;
    }

    @include mixins.respond-below(sm) {
      height: 48px;
    }

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }
  }
}

// Shared Footer Link Styles
@mixin auth-footer-link {
  margin-top: 1.5rem;
  text-align: center;

  a {
    font-size: 0.875rem;
    color: var(--hi-color-gray-dark);
    font-weight: 500;
    transition: color 0.2s ease;

    &:hover {
      color: var(--mantine-color-secondary-5);
    }
  }
}

// Shared Footer with Terms (Register style)
@mixin auth-footer-terms {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hi-color-gray-2);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--hi-color-gray-dark);
  text-align: center;

  @include mixins.respond-below(sm) {
    font-size: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
  }

  a {
    color: var(--mantine-color-secondary-5);
    font-weight: 500;
    transition: color 0.2s ease;

    &:hover {
      color: var(--mantine-color-secondary-7);
    }
  }
}
