@layer components {
	.button {
		--button-bg: var(--color-bg);
		--button-text: var(--color-text);
		--button-border: var(--color-accent);

		display: inline-flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		padding-block: calc(var(--stack) * 0.6);
		padding-inline: calc(var(--gutter) * 0.6);
		background-color: var(--button-bg);
		color: var(--button-text);
		border: 1px solid var(--button-border);
		border-radius: var(--border-radius-lg);
		font-size: inherit;
		font-family: inherit;
		line-height: var(--line-height-sm);
		text-box: trim-both cap alphabetic;
		text-decoration: none;
		cursor: pointer;
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.button:visited {
		color: var(--button-text);
	}

	.button:hover {
		background-color: color-mix(
			in oklch,
			var(--button-border) 50%,
			transparent
		);
	}

	.button[aria-current] {
		background-color: color-mix(
			in oklch,
			var(--button-bg),
			currentcolor 20%
		) !important;
	}

	.button svg {
		block-size: 1em;
		inline-size: auto;
	}

	/* Variants */
	.button[data-variant~="primary"] {
		--button-text: var(--color-accent);
	}

	.button[data-variant~="fill"] {
		--button-bg: var(--color-text);
		--button-text: var(--color-bg);
		--button-border: var(--color-text);
	}

	.button[data-variant~="primary"][data-variant~="fill"] {
		--button-bg: var(--color-accent);
		/* dark text on the bright brand blue = 6:1 (light text was 2.99, failing AA) */
		--button-text: var(--color-text);
		--button-border: var(--color-accent);
	}

	.button[data-variant~="yellow"][data-variant~="fill"] {
		--button-bg: var(--color-yellow);
		--button-text: var(--color-text);
		--button-border: var(--color-yellow);
	}

	.button[data-variant~="simple"] {
		padding-inline: 0;
		border-radius: 0;
		border-color: transparent;
		background-color: transparent;
	}

	.button[data-variant~="ghost"] {
		--button-bg: transparent;
		--button-text: var(--color-text-invert);
		--button-border: oklch(from var(--color-bg) l c h / 30%);
	}

	.button[data-variant~="ghost"]:hover {
		background-color: oklch(from var(--color-bg) l c h / 10%);
	}

	.button[data-variant~="lg"] {
		padding-block: calc(var(--stack) * 0.8);
		padding-inline: calc(var(--gutter) * 1.5);
	}

	.button[data-variant~="menu"] {
		border-width: 0;
		background-color: transparent;
		border-radius: var(--border-radius-sm);
		inline-size: 100%;
		padding-inline: calc(var(--gutter) / 2);
	}
}