:where(.button, button, input[type="submit"]) {
	color: var(--color-text);
	background-color: var(--color-bg);
	border: var(--border-width-md) solid var(--color-text);
	border-radius: var(--border-radius-xl);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xxs);
	padding-block: var(--space-xs);
	padding-inline: var(--space-sm);
	font-size: inherit;
	font-family: inherit;
	text-decoration: none;
	line-height: var(--line-height-sm);
	text-box: trim-both cap alphabetic;

	&:visited {
		color: var(--color-text);
	}

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

	@media (--hover) {
		&:hover {
			color: var(--color-bg);
			border-color: var(--color-text);
			background-color: color-mix(
				in oklch,
				var(--color-text),
				var(--color-bg) 25%
			);
			cursor: pointer;
		}
	}

	&.--tactile {
		&:not(:focus-visible) {
			outline: var(--border-width-md) solid
				light-dark(
					oklch(from var(--neutral) 100% c h / 20%),
					oklch(from var(--neutral) 0% c h / 20%)
				);
			outline-offset: calc(var(--border-width-md) * -2);
		}
	}

	&.--fill:not(:hover) {
		color: var(--color-bg);
		background-color: var(--color-text);
		border-color: var(--color-text);
	}

	&.--primary {
		--color-text: var(--color-accent);
	}

	&.--secondary {
		--color-text: var(--color-link);
	}

	&.--simple {
		padding-inline: 0;
		border-radius: 0;
		border-color: transparent;
		background-color: transparent;

		@media (--hover) {
			&:hover {
				color: var(--color-text);
				border-block-end-color: var(--color-text);
			}
		}
	}

	&.--subtle {
		background-color: var(--color-bg);
		border-color: oklch(from var(--color-border) l c h / 50%);
		border-width: var(--border-width-sm);

		@media (--hover) {
			&:hover {
				color: var(--color-text);
				background-color: color-mix(in oklch, currentcolor, var(--color-bg) 90%);
			}
		}
	}

	&.--menu {
		border-width: 0;
		background-color: transparent;
		border-radius: var(--border-radius-sm);
		inline-size: 100%;
		padding-inline: var(--space-xs);

		@media (--hover) {
			&:hover {
				color: var(--color-text);
				background-color: var(--color-bg-dark);
			}
		}
	}

	&.--point-left::before,
	&.--point-right::before,
	&.--point-down::before {
		content: "";
		inline-size: 1em;
		block-size: 1em;
		scale: 0.9;
		background-color: currentcolor;
		clip-path: var(--shape-chevron);
	}

	&.--point-left::before {
		rotate: 180deg;
	}
	&.--point-down::before {
		rotate: 90deg;
	}
	&.--point-none::before {
		content: none;
	}

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