@layer components {
	.tag {
		--tag-color: var(--color-accent);

		display: inline-flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
		padding-block: 0.125rem;
		padding-inline: calc(var(--gutter) / 2);
		border-radius: var(--border-radius-xl);
		background: oklch(from var(--tag-color) l c h / 0.12);
		color: oklch(from var(--tag-color) calc(l - 0.15) c h);
		border: var(--border-width-sm) solid
			oklch(from var(--tag-color) l c h / 0.2);
		font-size: var(--font-size-sm);
	}

	.tag svg {
		inline-size: 1em;
		block-size: 1em;
		flex-shrink: 0;
	}

	.tag:is(a, button) {
		cursor: pointer;
		text-decoration: none;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.tag:is(a, button):hover {
		background: oklch(from var(--tag-color) l c h / 0.2);
		border-color: oklch(from var(--tag-color) l c h / 0.3);
	}

	.tag:is(a, button):focus-visible {
		outline: 2px solid var(--tag-color);
		outline-offset: 2px;
	}

	.tag:is(a, button):active {
		background: oklch(from var(--tag-color) l c h / 0.25);
	}

	.tag:is(button) {
		background: oklch(from var(--tag-color) l c h / 0.12);
		box-shadow: none;
		font: inherit;
		margin: 0;
	}

	/* Variants */
	.tag[data-variant="muted"] {
		color: var(--color-text);
	}

	.tag[data-variant="yellow"] {
		--tag-color: var(--color-yellow);
	}

	.tag[data-variant="green"] {
		--tag-color: var(--color-green);
	}

	.tag[data-variant="magenta"] {
		--tag-color: var(--color-magenta);
	}

	.tag[data-variant="neutral"] {
		--tag-color: var(--base-400);
	}
}