/* Fashion auth pages — alerts, password toggle, strength, checkboxes */

.fashion-auth-alert {
	border-radius: 0.25rem;
	padding: 0.875rem 1rem;
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.5;
}

.fashion-auth-alert--error {
	border: 1px solid rgba(196, 69, 54, 0.35);
	background: #fef2f0;
	color: #9f2d20;
}

.fashion-auth-alert--success {
	border: 1px solid rgba(74, 107, 74, 0.35);
	background: #f3f7f3;
	color: #2f4f2f;
}

.fashion-auth-alert ul {
	margin: 0;
	padding-left: 1.125rem;
}

.fashion-auth-alert li + li {
	margin-top: 0.25rem;
}

.fashion-auth-input-wrap {
	position: relative;
}

.fashion-auth-input-wrap .v2-form-input {
	padding-right: 2.75rem;
}

.fashion-auth-toggle {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
}

.fashion-auth-toggle:hover {
	opacity: 1;
}

.fashion-auth-strength {
	margin-top: 0.5rem;
	height: 0.25rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(26, 26, 26, 0.08);
}

.fashion-auth-strength-bar {
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: rgba(26, 26, 26, 0.2);
	transition: width 0.2s ease, background-color 0.2s ease;
}

.fashion-auth-strength-bar.is-weak {
	width: 25%;
	background: #c44536;
}

.fashion-auth-strength-bar.is-fair {
	width: 50%;
	background: #c4a35a;
}

.fashion-auth-strength-bar.is-good {
	width: 75%;
	background: #6b8f71;
}

.fashion-auth-strength-bar.is-strong {
	width: 100%;
	background: #4a6b4a;
}

.v2-form-check-label.is-checked .v2-form-checkbox {
	background: #4a6b4a;
	border-color: #4a6b4a;
}

.v2-form-check-label.is-checked .v2-form-checkbox svg {
	opacity: 1;
}

@keyframes fashion-auth-spin {
	to {
		transform: rotate(360deg);
	}
}

.auth-submit.is-loading {
	pointer-events: none;
	opacity: 0.9;
}

.auth-submit__spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-left: 0.35rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: fashion-auth-spin 0.65s linear infinite;
	flex-shrink: 0;
}

.v2-auth-social[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}