@use '../../styles/auth-shared' as auth;

.change-password-container {
  @include auth.auth-container;
}

.change-password-wrapper {
  @apply flex flex-col items-center gap-6 absolute top-1/4 transform -translate-y-1/4;
}

.change-password-card-wrapper {
  @include auth.auth-card-wrapper(500px, -6rem);
}

.change-password-card-border {
  @include auth.auth-card-border;
}

.change-password-card {
  @include auth.auth-card;
}

.app-title {
  @apply text-5xl font-extrabold text-white drop-shadow-lg;
  text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.change-password-header {
  @include auth.auth-header;
}

.logo-wrapper {
  @include auth.auth-logo;
}

.icon-circle {
  @include auth.auth-icon-circle;
}

.change-password-title {
  @include auth.auth-title;
}

.change-password-subtitle {
  @include auth.auth-subtitle;
}

form {
  @apply flex flex-col gap-4;
}

.change-password-form {
  @include auth.auth-form;
}

.p-field {
  @apply flex flex-col gap-2;
}

.form-field {
  @include auth.form-field;
}

.form-label {
  @include auth.form-label;
}

.field-error {
  @include auth.field-error;
}

p-button {
  @apply mt-4;
}

.change-password-button {
  @include auth.auth-button;
}

.message-container {
  @include auth.message-container;
}

.error-message {
  @include auth.error-message;
}

.success-message {
  @include auth.success-message;
}
