@import './inputtext';

.p-password {
  @apply relative inline-flex;
}

.p-password .p-password-overlay {
  @apply min-w-full;
}

.p-password-meter {
  @apply h-3 rounded-md bg-surface-200 dark:bg-surface-700;
}

.p-password-meter-label {
  @apply h-full w-0 rounded-md transition-[width] duration-1000 ease-in-out;
}

.p-password-meter-weak {
  @apply bg-red-500 dark:bg-red-400;
}

.p-password-meter-medium {
  @apply bg-amber-500 dark:bg-amber-400;
}

.p-password-meter-strong {
  @apply bg-green-500 dark:bg-green-400;
}

.p-password-fluid {
  @apply flex;
}

.p-password-fluid .p-password-input {
  @apply w-full;
}

.p-password-input::-ms-reveal,
.p-password-input::-ms-clear {
  @apply hidden;
}

.p-password-overlay {
  @apply rounded-md border border-surface-200 bg-surface-0 p-3 text-surface-700 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

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

.p-password-toggle-mask-icon {
  @apply absolute end-3 top-1/2 -mt-2 h-4 w-4 text-surface-500 dark:text-surface-400;
}

.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
  @apply pe-10;
}
