/*
PasswordInput

An .input with a show/hide button inside its end edge. The input reserves
the button's width in its inline-end padding, so toggling visibility,
focus, invalid and disabled never move the text or change the box. The
two icons share one grid cell; only the current one is visible.

  .password-input                root (data-state="visible" | "hidden", data-disabled, data-invalid, data-readonly)
  .password-input-input          the <input class="input">
  .password-input-toggle         the visibility button
  .password-input-indicator      the icon stack inside it
*/

@layer components {

.password-input {
  --password-input-height: var(--control-height);

  position:  relative;
  display:   block;
  width:     100%;
  min-width: 0;
}

.password-input.is-sm {
  --password-input-height: var(--control-height-sm);
}

.password-input.is-lg {
  --password-input-height: var(--control-height-lg);
}

.password-input .password-input-input {
  padding-inline-end: var(--password-input-height);
}

/* Native reveal and clear buttons would double ours (Edge, IE). */
.password-input-input::-ms-reveal,
.password-input-input::-ms-clear {
  display: none;
}

.password-input-toggle {
  position:        absolute;
  inset-block:     0;
  inset-inline-end: 0;
  display:         inline-grid;
  place-items:     center;
  width:           var(--password-input-height);
  margin:          0;
  padding:         0;
  border:          0;
  border-radius:   var(--radius-control);
  background:      transparent;
  color:           var(--ink-dim);
  cursor:          pointer;
  transition:      color var(--duration-fast) var(--ease-out);
}

.password-input-toggle:hover:not(:disabled) {
  color: var(--ink);
}

.password-input-toggle:focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

.password-input-toggle:disabled {
  cursor: not-allowed;
}

.password-input-indicator {
  display: grid;
}

.password-input-indicator > * {
  display:     inline-grid;
  place-items: center;
  grid-area:   1 / 1;
  visibility:  hidden;
}

.password-input-indicator .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.password-input[data-state="hidden"] .password-input-indicator > [data-when="hidden"],
.password-input[data-state="visible"] .password-input-indicator > [data-when="visible"] {
  visibility: visible;
}

}