@layer components {
	.yst-root {
		.yst-autocomplete {
			@apply yst-relative;
		}

		.yst-autocomplete--error {
			.yst-autocomplete__button {
				@apply
				yst-border-red-300

				focus:yst-outline-none
				focus:yst-ring-red-500
				focus:yst-border-red-500;
			}

			.yst-autocomplete__input {
				@apply yst-placeholder-red-300;
			}
		}

		.yst-autocomplete--disabled {

			@apply
			yst-opacity-50
			yst-cursor-not-allowed
			focus:yst-ring-0;

			.yst-autocomplete__input {
				@apply
				yst-cursor-not-allowed
				focus:yst-ring-0;
			}

			.yst-autocomplete__button {
				@apply
				yst-cursor-not-allowed
				focus-within:yst-border-slate-200
				focus-within:yst-outline-none
				focus-within:yst-ring-slate-200;
			}
		}

		.yst-autocomplete__button {
			@apply
			yst-w-full
			yst-rounded-md
			yst-bg-white
			yst-shadow-sm
			yst-border-0
			yst-ring-1
			yst-ring-slate-300
			yst-flex
			yst-items-center
			yst-px-3
			focus-within:yst-border-primary-500
			focus-within:yst-outline-none
			focus-within:yst-ring-primary-500;
		}

		.yst-autocomplete__button-icon {
			@apply yst-absolute yst-top-[0.6875rem] yst-right-2.5 yst-text-slate-400 yst-pointer-events-none yst-w-5 yst-h-5;
		}

		.yst-autocomplete__input {
			@apply
			yst-w-full
			yst-border-0
			yst-py-2
			yst-pl-0
			yst-pr-10
			yst-shadow-none
			yst-text-sm
			focus:yst-ring-0
			yst-text-slate-800;
		}

		.yst-autocomplete__options {
			@apply
			yst-absolute
			yst-z-20
			yst-w-full
			yst-mt-1
			yst-overflow-auto
			yst-bg-white
			yst-rounded-md
			yst-shadow-lg
			yst-max-h-60
			yst-ring-1
			yst-ring-black
			yst-ring-opacity-5
			focus:yst-outline-none
			yst-text-sm;
		}

		.yst-autocomplete__option {
			@apply
			yst-cursor-default
			yst-select-none
			yst-relative
			yst-flex
			yst-items-center
			yst-justify-between
			yst-px-3
			yst-py-2
			yst-text-slate-700;

			&--active {
				@apply yst-bg-slate-200;
			}

			&--selected {
				@apply yst-bg-primary-500 yst-text-white;
			}
		}

		.yst-select__option-label {
			@apply yst-block yst-truncate;
		}

		.yst-autocomplete__option-check {
			@apply
			yst-w-5
			yst-h-5
			yst-text-white
			yst-shrink-0;
		}
	}
}
