/*
 * PureCSS.com
 * https://purecss.com/examples/input-validation/
 * Real-time form validation feedback using :valid, :invalid, and :user-invalid.
 */

.demo-input-validation .field {
		position: relative;
		margin: .75rem 0;
	}

:is(.demo-input-validation .field)::after {
			position: absolute;
			right: .75rem;
			top: 50%;
			transform: translateY(-50%);
			font-size: 1rem;
			pointer-events: none;
		}

.demo-input-validation input {
		display: block;
		width: 260px;
		padding: .65rem 2.5rem .65rem .9rem;
		border: 2px solid var(--border);
		border-radius: 8px;
		font-size: .95rem;
		font-family: inherit;
		background: var(--surface);
		color: var(--text);
		outline: none;
		transition: border-color .2s;
	}

:is(.demo-input-validation input):focus {
			border-color: var(--accent);
		}

:is(.demo-input-validation input):user-invalid {
			border-color: var(--coral);
		}

:is(.demo-input-validation input):user-valid {
			border-color: var(--teal);
		}

.demo-input-validation input:user-invalid ~ .field-icon::after,.demo-input-validation input:user-valid ~ .field-icon::after {
		content: "";
		display: block;
		width: 16px;
		height: 16px;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
	}

.demo-input-validation input:user-invalid ~ .field-icon::after {
		background: var(--coral);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
	}

.demo-input-validation input:user-valid ~ .field-icon::after {
		background: var(--teal);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
	}

.demo-input-validation .field-icon {
		position: absolute;
		right: .75rem;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1rem;
		pointer-events: none;
	}

.demo-input-validation input:user-invalid ~ .field-icon { color: var(--coral); }

.demo-input-validation input:user-valid ~ .field-icon { color: var(--teal); }

.demo-input-validation .hint {
		font-size: .75rem;
		color: var(--text-muted);
		margin-top: .25rem;
	}

.demo-input-validation input:user-invalid ~ .hint {
		color: var(--coral);
	}