/**
 * Button outline: .mk-button--outline (src/Ui/Button.php), a part of
 * button.css loaded with it (style dependency of markiza-button, so it is
 * printed first: .mk-button.mk-button--outline outranks the base rules).
 */

/*
 * Outline: bordered, optional icon before the label ("Filtry", "Sortuj").
 * Min width per breakpoint (`custom.button.outline.{mobile,tablet,desktop}`).
 */
.mk-button.mk-button--outline {
	--mk-button-fg: var(--wp--custom--color--text--primary);
	--mk-button-border: var(--wp--custom--color--control--border);
	--mk-button-min-width: var(
		--wp--custom--button--outline--mobile--min-width
	);

	gap: var(--wp--custom--button--outline--gap);
	min-inline-size: var(--mk-button-min-width);
	padding-block: var(--wp--custom--button--outline--padding-block);
	padding-inline: var(--wp--custom--button--outline--padding-inline);

	/* Inner stroke, as in the design: the border adds no size. */
	box-shadow: inset 0 0 0 var(--wp--custom--button--outline--border-width)
		var(--mk-button-border);
	border-radius: var(--wp--custom--button--outline--radius);
	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);
	white-space: nowrap;
	transition-property: background-color, border-color, color;
}

@media (min-width: 48rem) {
	.mk-button.mk-button--outline {
		--mk-button-min-width: var(
			--wp--custom--button--outline--tablet--min-width
		);
	}
}

@media (min-width: 64rem) {
	.mk-button.mk-button--outline {
		--mk-button-min-width: var(
			--wp--custom--button--outline--desktop--min-width
		);
	}
}

@media (hover: hover) {
	.mk-button.mk-button--outline:hover {
		--mk-button-border: var(--wp--custom--color--control--border-hover);
	}
}

.mk-button.mk-button--outline:is(:active, [aria-expanded="true"]) {
	--mk-button-bg: var(--wp--custom--color--surface--hover);
	--mk-button-border: var(--wp--custom--color--interactive--selected);
}

.mk-button.mk-button--outline:is(:disabled, [aria-disabled="true"]) {
	--mk-button-fg: var(--wp--custom--color--text--placeholder);
	--mk-button-border: var(--wp--custom--color--interactive--subtle);
}