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

.input-wrap > .password-control {
  flex: 1 1 auto;
  min-width: 0;
}

.password-control > input.has-password-toggle {
  padding-right: 52px !important;
}

#authGate .input-wrap .password-control > .auth-input {
  padding-left: 38px;
}

html[data-ui-shell="v2"] #authGate .input-wrap .password-control > .auth-input,
html[data-ui-shell="v3"] #authGate .input-wrap .password-control > .auth-input {
  padding-left: 48px;
}

.password-toggle {
  appearance: none;
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--auth-ui-muted, var(--login-muted, #64748b));
  cursor: pointer;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  border-color: var(--auth-ui-border, var(--login-border, rgba(148, 163, 184, .45)));
  background: rgba(37, 99, 235, .08);
  color: var(--auth-ui-accent, var(--login-accent, #2563eb));
  outline: none;
}

.password-toggle:active {
  transform: translateY(-50%) scale(.98);
}

.password-toggle .eye-icon {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle .eye-closed {
  display: none;
}

.password-toggle.is-visible .eye-open {
  display: none;
}

.password-toggle.is-visible .eye-closed {
  display: block;
}

html[data-theme="dark"] .password-toggle,
html[data-ui-shell="v2"] .password-toggle,
html[data-ui-shell="v3"][data-theme="dark"] .password-toggle {
  color: rgba(203, 213, 225, .76);
}

html[data-theme="dark"] .password-toggle:hover,
html[data-theme="dark"] .password-toggle:focus-visible,
html[data-ui-shell="v2"] .password-toggle:hover,
html[data-ui-shell="v2"] .password-toggle:focus-visible,
html[data-ui-shell="v3"][data-theme="dark"] .password-toggle:hover,
html[data-ui-shell="v3"][data-theme="dark"] .password-toggle:focus-visible {
  border-color: rgba(96, 165, 250, .32);
  background: rgba(96, 165, 250, .12);
  color: #bfdbfe;
}