/**
 * Button: .mk-button + variant modifiers (src/Ui/Button.php).
 *
 * Values come only from logical tokens (theme.json settings.custom).
 * Desktop sizes: smaller screens will redefine --wp--custom--button--*
 * in media queries. States only switch the local --mk-button-* properties,
 * so every variant shares one rule set.
 */

.mk-button {
	--mk-button-bg: transparent;
	--mk-button-fg: currentcolor;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--button--radius);
	background-color: var(--mk-button-bg);
	color: var(--mk-button-fg);
	font-family: var(--wp--custom--text--label-large--font-family);
	font-size: var(--wp--custom--text--label-large--font-size);
	font-weight: var(--wp--custom--text--label-large--font-weight);
	line-height: var(--wp--custom--text--label-large--line-height);
	letter-spacing: var(--wp--custom--text--label-large--letter-spacing);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition-property: background-color, color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-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-button:is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
}

/* Primary colors: primary medium, primary small, quick add. */
.mk-button--primary {
	--mk-button-bg: var(--wp--custom--color--action--primary--default);
	--mk-button-fg: var(--wp--custom--color--text--on-action);
}

/* Text button: the action color is the text color. */
.mk-button--text {
	--mk-button-fg: var(--wp--custom--color--action--primary--default);

	gap: var(--wp--custom--button--text--gap);
	white-space: nowrap;
}

@media (hover: hover) {
	/* Pointer devices only: no sticky hover on touch screens. */
	.mk-button--primary:hover {
		--mk-button-bg: var(--wp--custom--color--action--primary--hover);
	}

	.mk-button--text:hover {
		--mk-button-fg: var(--wp--custom--color--action--primary--hover);
	}
}

.mk-button--primary:active {
	--mk-button-bg: var(--wp--custom--color--action--primary--active);
}

.mk-button--text:active {
	--mk-button-fg: var(--wp--custom--color--action--primary--active);
}

.mk-button--primary:is(:disabled, [aria-disabled="true"]) {
	--mk-button-bg: var(--wp--custom--color--action--primary--disabled);
}

.mk-button--text:is(:disabled, [aria-disabled="true"]) {
	--mk-button-fg: var(--wp--custom--color--action--primary--disabled);
}

/* Text small: no icon, smaller text ("Resetuj"). */
.mk-button--text-small {
	font-family: var(--wp--custom--text--label-medium--font-family);
	font-size: var(--wp--custom--text--label-medium--font-size);
	font-weight: var(--wp--custom--text--label-medium--font-weight);
	line-height: var(--wp--custom--text--label-medium--line-height);
	letter-spacing: var(--wp--custom--text--label-medium--letter-spacing);
}

/* Sizes. */
.mk-button--medium {
	padding-block: var(--wp--custom--button--medium--padding-block);
	padding-inline: var(--wp--custom--button--medium--padding-inline);
}

.mk-button--small {
	padding-block: var(--wp--custom--button--small--padding-block);
	padding-inline: var(--wp--custom--button--small--padding-inline);
	font-family: var(--wp--custom--text--label-medium--font-family);
	font-size: var(--wp--custom--text--label-medium--font-size);
	font-weight: var(--wp--custom--text--label-medium--font-weight);
	line-height: var(--wp--custom--text--label-medium--line-height);
	letter-spacing: var(--wp--custom--text--label-medium--letter-spacing);
}

/* Fixed circle, never shrinks inside flex rows. */
.mk-button--quick-add {
	flex: none;
	border-radius: var(--wp--custom--button--quick-add--radius);
	inline-size: var(--wp--custom--button--quick-add--size);
	block-size: var(--wp--custom--button--quick-add--size);
	font-weight: var(--wp--custom--button--quick-add--font-weight);
}

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

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