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

		.yst-select--disabled {
			.yst-select__label,
			.yst-select__button {
				@apply yst-opacity-50 yst-cursor-not-allowed;
			}
		}

		.yst-select__button {
			@apply
			yst-relative
			yst-w-full
			yst-leading-6
			yst-py-2
			yst-px-3
			yst-text-left
			yst-text-slate-800
			yst-bg-white
			yst-ring-1
			yst-ring-inset
			yst-ring-slate-300
			yst-rounded-md
			yst-shadow-sm
			yst-cursor-default
			yst-flex
			yst-items-center
			yst-justify-between

			focus:yst-outline-none
			focus:yst-ring-1
			focus:yst-ring-primary-500
			focus:yst-border-primary-500;
		}

		.yst-select__button-icon {
			@apply yst-absolute yst-top-2.5 yst-right-2.5 yst-text-slate-400 yst-pointer-events-none yst-w-5 yst-h-5;
		}

		.yst-select__options {
			@apply
			yst-absolute
			yst-z-10
			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-select__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-text-white yst-bg-primary-600;
			}
		}

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

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