@layer components {
	.yst-root {
		.yst-button {
			@apply
			yst-inline-flex
			yst-items-center
			yst-justify-center
			yst-py-2
			yst-px-3
			yst-ring-inset
			yst-ring-1
			yst-ring-transparent
			yst-shadow-sm
			yst-no-underline
			yst-cursor-pointer
			yst-rounded-md
			yst-text-sm
			yst-font-medium
			yst-leading-5
			yst-text-center

			focus:yst-outline
			focus:yst-outline-2
			focus:yst-outline-offset-2
			focus:yst-outline-primary-500;
		}

		/* Special styling for buttons rendered `as` "a" (to override anchor defaults). */
		a.yst-button {
			@apply focus:yst-rounded-md;
		}

		/* Variants */

		.yst-button--primary {
			@apply
			yst-text-white
			yst-bg-primary-500
			yst-ring-transparent

			hover:yst-text-white
			hover:yst-bg-primary-700
			focus:yst-text-white
			focus:yst-outline-primary-700
			visited:yst-text-white
			visited:hover:yst-text-white;
		}

		.yst-button--secondary {
			@apply
			yst-text-slate-800
			yst-bg-white
			yst-ring-slate-300

			hover:yst-text-slate-800
			hover:yst-bg-slate-50
			focus:yst-text-slate-800
			focus:yst-outline-primary-700
			visited:yst-text-slate-800
			visited:hover:yst-text-slate-800;
		}

		.yst-button--tertiary {
			@apply
			yst-ring-0
			yst-shadow-none
			yst-text-primary-500
			yst-bg-transparent

			hover:yst-text-primary-800
			focus:yst-text-primary-800
			focus:yst-outline-primary-700
			visited:yst-text-primary-800
			visited:hover:yst-text-primary-800;
		}

		.yst-button--error {
			@apply
			yst-text-white
			yst-bg-red-600
			yst-border-transparent

			hover:yst-text-white
			hover:yst-bg-red-700
			focus:yst-text-white
			focus:yst-outline-red-600
			visited:yst-text-white
			visited:hover:yst-text-white;
		}

		.yst-button--upsell {
			@apply
			yst-text-amber-900
			yst-bg-amber-300
			yst-border-transparent

			hover:yst-text-amber-900
			hover:yst-bg-amber-400
			focus:yst-text-amber-900
			focus:yst-outline-amber-400
			visited:yst-text-amber-900
			visited:hover:yst-text-amber-900;
		}

		/* Sizes */

		.yst-button--large {
			@apply
			yst-text-tiny
			yst-leading-6
			yst-px-3
			yst-py-2;
		}

		.yst-button--extra-large {
			@apply
			yst-text-base
			yst-px-3.5
			yst-py-2.5
			yst-leading-6;
		}

		.yst-button--small {
			@apply
			yst-text-xs
			yst-leading-4
			yst-px-2.5
			yst-py-1.5;
		}

		/* States */

		.yst-button--disabled {
			@apply
			yst-opacity-50
			yst-cursor-not-allowed

			focus:yst-ring-0;
		}
	}
}
