@layer components {
	.yst-root {

		/* Validation icon */

		.yst-validation-icon {
			@apply yst-pointer-events-none;
		}

		.yst-validation-icon--success {
			@apply yst-text-green-500;
		}

		.yst-validation-icon--info {
			@apply yst-text-blue-500;
		}

		.yst-validation-icon--warning {
			@apply yst-text-amber-500;
		}

		.yst-validation-icon--error {
			@apply yst-text-red-500;
		}

		/* Validation input */

		.yst-validation-input {
			@apply yst-relative;
		}

		.yst-validation-input--success {
			.yst-validation-input__input {
				@apply
				yst-pr-10
				yst-ring-green-300
				focus:yst-ring-green-500
				focus-within:yst-ring-green-500;
			}
		}

		.yst-validation-input--info {
			.yst-validation-input__input {
				@apply
				yst-pr-10
				yst-ring-blue-300
				focus:yst-ring-blue-500
				focus-within:yst-ring-blue-500;
			}
		}

		.yst-validation-input--warning {
			.yst-validation-input__input {
				@apply
				yst-pr-10
				yst-ring-amber-300
				focus:yst-ring-amber-500
				focus-within:yst-ring-amber-500;
			}
		}

		.yst-validation-input--error {
			.yst-validation-input__input {
				@apply
				yst-pr-10
				yst-ring-red-300
				focus:yst-ring-red-500
				focus-within:yst-ring-red-500;
			}
		}

		.yst-validation-input__input {
			@apply
			focus:yst-ring-2
			focus-within:yst-ring-2;
		}

		.yst-validation-input__icon {
			@apply yst-absolute yst-top-[0.6875rem] yst-right-2.5 yst-w-5 yst-h-5;
		}

		/* Validation message */

		.yst-validation-message {
			a {
				@apply
				yst-font-medium
				yst-text-inherit
				focus:yst-ring-current
				hover:visited:yst-text-inherit;
			}
		}

		.yst-validation-message--success {
			@apply yst-text-green-600;
		}

		.yst-validation-message--info {
			@apply yst-text-blue-600;
		}

		.yst-validation-message--warning {
			@apply yst-text-amber-600;
		}

		.yst-validation-message--error {
			@apply yst-text-red-600;
		}
	}
}
