/**
 * Tabs: .mk-tab + .mk-tab--filter / .mk-tab--navigation (src/Ui/Tab.php).
 *
 * Selected = [aria-pressed="true"] (filter) or [aria-current="page"]
 * (navigation), so the look always matches what assistive tech announces.
 * States only switch the local --mk-tab-* properties.
 */

.mk-tab {
	--mk-tab-border: var(--wp--custom--color--tab--border);
	--mk-tab-bg: transparent;
	--mk-tab-fg: var(--wp--custom--color--text--primary);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--tab--gap);
	box-sizing: border-box;
	margin: 0;
	padding-block: var(--wp--custom--tab--padding-block);
	padding-inline: var(--wp--custom--tab--padding-inline);
	border-width: var(--wp--custom--tab--border-width);
	border-style: solid;
	border-color: var(--mk-tab-border);
	border-radius: var(--wp--custom--tab--radius);
	background-color: var(--mk-tab-bg);
	color: var(--mk-tab-fg);
	font-family: var(--wp--custom--text--body-small--font-family);
	font-size: var(--wp--custom--text--body-small--font-size);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	line-height: var(--wp--custom--text--body-small--line-height);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition-property: background-color, border-color, color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-tab:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

.mk-tab .mk-icon {
	flex: none;
	inline-size: var(--wp--custom--tab--icon-size);
	block-size: var(--wp--custom--tab--icon-size);
}

/* The check mark is in the markup of every filter tab, visible only while selected. */
.mk-tab__check {
	display: none;
}

.mk-tab:is([aria-pressed="true"], [aria-current="page"]) {
	--mk-tab-border: var(--wp--custom--color--tab--selected);
	--mk-tab-bg: var(--wp--custom--color--tab--selected);
	--mk-tab-fg: var(--wp--custom--color--tab--selected-text);

	font-family: var(--wp--custom--text--label-small--font-family);
	font-size: var(--wp--custom--text--label-small--font-size);
	font-weight: var(--wp--custom--text--label-small--font-weight);
	line-height: var(--wp--custom--text--label-small--line-height);
	letter-spacing: var(--wp--custom--text--label-small--letter-spacing);
}

.mk-tab[aria-pressed="true"] .mk-tab__check {
	display: contents;
}

@media (hover: hover) {
	/* Pointer devices only. A selected navigation tab keeps its look on hover. */
	.mk-tab:not([aria-pressed="true"], [aria-current="page"]):hover {
		--mk-tab-bg: var(--wp--custom--color--tab--hover-background);
	}

	.mk-tab--filter[aria-pressed="true"]:hover {
		--mk-tab-border: var(--wp--custom--color--tab--selected-hover);
		--mk-tab-bg: var(--wp--custom--color--tab--selected-hover);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mk-tab {
		transition: none;
	}
}