[data-site-password-field] {
	position: relative;
	--site-password-toggle-accent: #41cfff;
	--site-password-toggle-size: 42px;
	--site-password-toggle-surface: rgba(8, 12, 28, .56);
}

.site-password-field {
	display: block;
	width: 100%;
	min-width: 0;
	height: 100%;
}

[data-site-password-input] {
	padding-right: calc(var(--site-password-toggle-size) + 10px) !important;
}

.site-password-toggle {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	z-index: 6;
	display: grid;
	width: var(--site-password-toggle-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid color-mix(in srgb, var(--site-password-toggle-accent) 24%, transparent);
	border-radius: 0;
	color: color-mix(in srgb, var(--site-password-toggle-accent) 46%, #7f8aa3);
	background: var(--site-password-toggle-surface);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	place-items: center;
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.site-password-toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.45;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: filter 120ms ease, transform 120ms cubic-bezier(.22, 1, .36, 1);
}

.site-password-toggle:hover,
.site-password-toggle:focus-visible {
	color: color-mix(in srgb, var(--site-password-toggle-accent) 76%, white);
	background: color-mix(in srgb, var(--site-password-toggle-accent) 8%, var(--site-password-toggle-surface));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-password-toggle-accent) 17%, transparent);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--site-password-toggle-accent) 24%, transparent));
	outline: none;
}

.site-password-toggle:active svg {
	transform: scale(.78);
}

.site-password-toggle.is-visible {
	color: #fff;
	background: color-mix(in srgb, var(--site-password-toggle-accent) 13%, var(--site-password-toggle-surface));
	box-shadow:
		inset 0 -2px 0 var(--site-password-toggle-accent),
		inset 0 0 0 1px color-mix(in srgb, var(--site-password-toggle-accent) 24%, transparent);
}

.site-password-toggle.is-visible svg {
	transform: scale(.92);
}

.site-password-toggle.is-visible:active svg {
	transform: scale(.72);
}

/* Use complete official eye/eye-off icons instead of adding a handmade slash. */
button [data-password-visible="true"],
button[aria-pressed="true"] [data-password-visible="false"] { display: none; }
button[aria-pressed="true"] [data-password-visible="true"] { display: block; }

.account-auth__field[data-site-password-field] {
	--site-password-toggle-size: 58px;
	--site-password-toggle-surface: rgba(8, 13, 31, .82);
}

.account-auth__field[data-site-password-field] .site-password-toggle {
	border-left-color: rgba(116, 128, 184, .3);
}

.account-auth__field[data-site-password-field]:focus-within .site-password-toggle,
.account-auth__field[data-site-password-field]:has(input:not(:placeholder-shown)) .site-password-toggle,
.account-auth__field[data-site-password-field]:has(input:-webkit-autofill) .site-password-toggle {
	border-left-color: var(--account-auth-cyan, #41cfff);
}

.account-cloud-password-modal [data-site-password-field] {
	height: 42px;
	--site-password-toggle-accent: #9b7cff;
	--site-password-toggle-size: 40px;
	--site-password-toggle-surface: rgba(8, 8, 25, .78);
}

.account-cloud-password-modal .site-password-toggle svg {
	width: 17px;
	height: 17px;
}

@media (prefers-reduced-motion: reduce) {
	.site-password-toggle,
	.site-password-toggle svg {
		transition-duration: .01ms;
	}
}