/**
 * Discount badge: .mk-discount-badge--medium / --small
 * (templates/components/discount-badge.php). Sizes differ in typography only.
 */

.mk-discount-badge {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding-block: var(--wp--custom--discount-badge--padding-block);
	padding-inline: var(--wp--custom--discount-badge--padding-inline);
	border-radius: var(--wp--custom--discount-badge--radius);
	background-color: var(--wp--custom--color--status--error--background);
	color: var(--wp--custom--color--status--error--foreground);
	white-space: nowrap;
}

.mk-discount-badge--medium {
	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);
}

.mk-discount-badge--small {
	font-family: var(--wp--custom--text--caption--font-family);
	font-size: var(--wp--custom--text--caption--font-size);
	font-weight: var(--wp--custom--text--caption--font-weight);
	line-height: var(--wp--custom--text--caption--line-height);
	letter-spacing: var(--wp--custom--text--caption--letter-spacing);
}