/**
 * Icon button: .mk-icon-button (templates/components/icon-button.php).
 *
 * A square hit area with a centred 24px icon: medium = 24 (header), large = 40
 * (social links). Tokens: theme.json `custom.iconButton`. The counter sits on
 * the top-right corner of the icon.
 */

.mk-icon-button {
	--mk-icon-button-size: var(--wp--custom--icon-button--medium--size);

	position: relative;
	display: inline-grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	inline-size: var(--mk-icon-button-size);
	block-size: var(--mk-icon-button-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--4);
	background: transparent;
	color: var(--wp--custom--color--text--primary);
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition-property: color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-icon-button--large {
	--mk-icon-button-size: var(--wp--custom--icon-button--large--size);
}

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

@media (hover: hover) {
	.mk-icon-button:hover {
		color: var(--wp--custom--color--text--accent);
	}
}

.mk-icon-button: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-icon-button__counter {
	position: absolute;
	inset-block-start: var(--wp--custom--icon-button--counter-offset);
	inset-inline-end: var(--wp--custom--icon-button--counter-offset);
}

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