/* Signup Tweaks: icon in field registration
 *
 * Every rule below sits behind .dcSignupField, a class the plugin puts on the three account fields of
 * the registration form and nothing else. So although this file loads on every front end page, none of
 * it can reach any other form on the site.
 */

/* The label is still there for screen readers, it is only moved off screen. It is not display:none,
   because that would hide it from them too. */
.dcSignupField .ipsFieldRow_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The icon is positioned absolutely, so the row content is what it anchors to. */
.dcSignupField .ipsFieldRow_content {
	position: relative;
	margin-left: 0 !important;
	width: 100% !important;
}

.dcSignupField .dcSignupIcon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	z-index: 1;

	/* pointer-events off, otherwise clicking the icon does not focus the field behind it. */
	pointer-events: none;

	/* The SVG is stroke="currentColor", so this one line sets the icon colour. */
	color: #8b8f98;
}

/* Keeps the typed text clear of the icon. */
.dcSignupField input[type="text"],
.dcSignupField input[type="email"],
.dcSignupField input[type="password"] {
	width: 100%;
	padding-left: 42px !important;
}

/* Light the icon up while the field is being used. focus-within is on the row, because the icon comes
   before the input in the markup and CSS cannot select backwards. */
.dcSignupField:focus-within .dcSignupIcon {
	color: #c9ced6;
}