@import url('tokens.css');

.password-visibility { position:relative; display:block; width:100%; min-width:0; }
.password-visibility:has(#view-content-code) { flex:1 1 0%; }
.password-visibility > input { padding-right:3rem !important; }
.password-visibility-toggle {
  position:absolute; top:50%; right:.4rem; z-index:2; display:grid; place-items:center;
  width:2rem !important; height:2rem; padding:0 !important; margin:0 !important; border:0 !important;
  border-radius:0 !important; background:transparent !important;
  color:var(--ink-dim) !important; font:inherit; line-height:1; cursor:pointer; transform:translateY(-50%) !important; clip-path:none !important;
}
.password-visibility-toggle::after { content:''; position:absolute; width:.95rem; height:1px; background:currentColor; transform:rotate(-42deg); opacity:0; }
.password-visibility-toggle[aria-pressed='true']::after { opacity:1; }
.password-visibility-toggle:hover,
.password-visibility-toggle:active { border:0 !important; background:transparent !important; color:var(--gold) !important; transform:translateY(-50%) !important; filter:none !important; box-shadow:none !important; }
.password-visibility-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
#ui-layer .password-visibility-toggle,
#create-modal .password-visibility-toggle,
#view-modal .password-visibility-toggle,
#account-modal .password-visibility-toggle {
  clip-path:none;
  box-shadow:none;
}
#ui-layer .password-visibility-toggle,
#create-modal .password-visibility-toggle,
#view-modal .password-visibility-toggle,
#account-modal .password-visibility-toggle {
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--ink-dim) !important;
  transform:translateY(-50%) !important;
  filter:none !important;
  box-shadow:none !important;
}
#ui-layer .password-visibility-toggle:hover,
#create-modal .password-visibility-toggle:hover,
#view-modal .password-visibility-toggle:hover,
#account-modal .password-visibility-toggle:hover,
#ui-layer .password-visibility-toggle:active,
#create-modal .password-visibility-toggle:active,
#view-modal .password-visibility-toggle:active,
#account-modal .password-visibility-toggle:active {
  border:0 !important;
  background:transparent !important;
  color:var(--gold) !important;
  transform:translateY(-50%) !important;
  filter:none !important;
  box-shadow:none !important;
}
#ui-layer .password-visibility-toggle:disabled,
#create-modal .password-visibility-toggle:disabled,
#view-modal .password-visibility-toggle:disabled,
#account-modal .password-visibility-toggle:disabled {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:translateY(-50%) !important;
}
#view-modal #view-content-unlock-form .password-visibility-toggle {
  right:.55rem;
  width:1.75rem !important;
  height:1.75rem;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(253,230,138,.78) !important;
}
#view-modal #view-content-unlock-form .password-visibility-toggle:hover {
  color:#fde68a !important;
}