/**
 * Styles for the Toggle Password component
 *
 * Uses Bootstrap input-group structure to
 * place the toggle button next to the input
 */

/* Container with input-group */
.input-group.input-group-merge {
  /* Already has Bootstrap styles */
  /* Only add specific styles if necessary */
}

/* Toggle button (span.input-group-text) */
.input-group-text.cursor-pointer {
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease-in-out;
}

/* Hover effect */
.input-group-text.cursor-pointer:hover {
  background-color: var(--bs-secondary-bg, #f8f9fa);
}

/* Active effect */
.input-group-text.cursor-pointer:active {
  transform: scale(0.95);
}

/* Focus for accessibility */
.input-group-text.cursor-pointer:focus-visible {
  outline: 2px solid var(--bs-primary, #696cff);
  outline-offset: 2px;
}

/* Icon inside the button */
.input-group-text.cursor-pointer svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: opacity 0.2s ease-in-out;
}

/* Icon classes for Tabler icons */
.input-group-text.cursor-pointer .icon-base {
  width: 1.25rem;
  height: 1.25rem;
  transition: opacity 0.2s ease-in-out;
}

/*
 * One eye at a time via stylesheet (CSP-safe).
 * style-src with a nonce ignores 'unsafe-inline', so style="display:none"
 * / element.style.display would leave both icons visible.
 */
.form-password-toggle .icon-visible,
.input-group-text.cursor-pointer .icon-visible {
  display: none;
}

.form-password-toggle .is-password-visible .icon-hidden,
.input-group-text.cursor-pointer.is-password-visible .icon-hidden {
  display: none;
}

.form-password-toggle .is-password-visible .icon-visible,
.input-group-text.cursor-pointer.is-password-visible .icon-visible {
  display: block;
}