/*
 * PasswordInput
 *
 * The box is `.ion-input` itself, as for SearchField: every size and state
 * comes from input.css. This file owns only the reveal toggle, and silencing
 * the browser's own.
 *
 * The toggle is (field height − 8px) square — 24 / 32 / 40 — like
 * SearchField's clear button, so a Small field's target still meets WCAG
 * 2.5.8. Unlike that button it is a tab stop, and its focus ring shows.
 */

/* Restates Input's surface at zero specificity, for the contrast gate — the
 * same reason, and the same :where(), as search-field.css. */
:where(.ion-password-input) {
  background-color: var(--surface-default);
}

.ion-password-input {
  /* The toggle carries its own inset; full padding would double it. */
  padding-inline-end: var(--spacing-4);
}

/* Edge's own reveal button, beside ours, is the second toggle this removes. */
.ion-password-input .ion-input__field::-ms-reveal {
  display: none;
}

.ion-password-input__reveal {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ion-input-height) - var(--spacing-8));
  height: calc(var(--ion-input-height) - var(--spacing-8));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
  transition:
    background-color var(--ion-duration-base) var(--ion-ease-out),
    color var(--ion-duration-base) var(--ion-ease-out);
}

.ion-password-input__reveal svg {
  width: var(--ion-input-icon-size);
  height: var(--ion-input-icon-size);
}

@media (hover: hover) {
  .ion-password-input__reveal:hover {
    background-color: var(--surface-hover);
    color: var(--icon-default);
  }
}

.ion-password-input__reveal:active,
.ion-password-input__reveal[aria-pressed='true'] {
  color: var(--icon-default);
}

.ion-password-input__reveal:active {
  background-color: var(--surface-pressed);
}

.ion-password-input__reveal:disabled {
  color: var(--icon-disabled);
  cursor: not-allowed;
}

.ion-password-input__reveal:focus-visible {
  outline: var(--border-width-thick) solid var(--border-focus);
  outline-offset: calc(-1 * var(--border-width-thick));
}