/**
 * Show/hide password toggle for the Divi Login module (3.1.0).
 *
 * Geometry and the icon colour only: the field keeps every Divi setting except
 * the right padding the button needs. Icon colours on white (on #EEE): rest
 * --bd-text-slate 12.8:1 (11.0:1), hover/focus --bd-blue 15.6:1 (13.5:1);
 * WCAG 1.4.11 asks 3:1.
 */

.et_pb_login_form .bd-core-access-pw-field {
	display: block;
	position: relative;
}

/*
 * [type] keeps the rule matching while the field is revealed as text.
 * !important: the Divi Login preset sets the field padding !important, so
 * without it the text runs under the button; this selector is the more specific.
 */
.et_pb_login_form .bd-core-access-pw-field input.bd-core-access-pw-input[type] {
	padding-right: 48px !important;
}

.et_pb_login_form .bd-core-access-pw-field .bd-core-access-pw-toggle {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: var(--bd-text-slate, #1E3351);
	line-height: 1;
	cursor: pointer;
}

.et_pb_login_form .bd-core-access-pw-field .bd-core-access-pw-toggle:hover,
.et_pb_login_form .bd-core-access-pw-field .bd-core-access-pw-toggle:focus-visible {
	background: transparent;
	color: var(--bd-blue, #001E60);
}

.et_pb_login_form .bd-core-access-pw-field .bd-core-access-pw-toggle:focus {
	outline: none;
}

.et_pb_login_form .bd-core-access-pw-field .bd-core-access-pw-toggle:focus-visible {
	outline: 2px solid var(--bd-blue, #001E60);
	outline-offset: -2px;
}

.et_pb_login_form .bd-core-access-pw-field .bd-core-access-pw-toggle .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	color: inherit;
}