/**
 * Plik: assets/css/components/password-field.css
 *
 * Odpowiada za:
 * - pole hasła z jedną, wyśrodkowaną ikoną oka
 * - ukrycie natywnego oka przeglądarki
 *
 * Powiązane pliki:
 * - templates/_partials/form-fields.tpl
 * - templates/_partials/password-toggle.tpl
 * - assets/js/components/cercasa-password.js
 */

.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-field > .form-control {
  width: 100%;
  padding-right: 2.75rem;
  border-radius: 0 !important;
}

.password-field > .form-control::-ms-reveal,
.password-field > .form-control::-ms-clear {
  display: none;
}

.password-field > .form-control::-webkit-credentials-auto-fill-button,
.password-field > .form-control::-webkit-contacts-auto-fill-button,
.password-field > .form-control::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.cercasa-password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 0.35rem !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2;
  display: grid !important;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: #8a908a;
  box-shadow: none;
  line-height: 0;
  font-size: 0;
  transform: translateY(-50%) !important;
  cursor: pointer;
}

.cercasa-password-toggle:hover,
.cercasa-password-toggle:focus-visible {
  color: #1a1a1a;
  background: transparent;
  box-shadow: none;
}

.cercasa-password-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.cercasa-password-toggle .cercasa-password-toggle__eye-off {
  display: none !important;
}

.cercasa-password-toggle.is-revealed .cercasa-password-toggle__eye {
  display: none !important;
}

.cercasa-password-toggle.is-revealed .cercasa-password-toggle__eye-off {
  display: block !important;
}

.password-field .material-icons {
  display: none;
}