/**
 * Suntyp Block — Button system (CSS variables + variants).
 * Breakpoints match responsive-layout.css: tablet ≤781px, mobile ≤480px.
 *
 * @package Suntyp_Block
 */

[data-suntyp-btn] {
	box-sizing: border-box;
	display: inline-block;
	max-width: 100%;
	width: var(--stb-ww-d, fit-content);
	text-align: var(--stb-tal-d, inherit);
	margin-top: var(--stb-mt-d, revert-layer);
	margin-right: var(--stb-mr-d, revert-layer);
	margin-bottom: var(--stb-mb-d, revert-layer);
	margin-left: var(--stb-ml-d, revert-layer);
}

[data-suntyp-btn] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--stb-ig-d, 0);
	width: var(--stb-lw-d, auto);
	max-width: 100%;
	padding-top: var(--stb-pt-d, revert-layer);
	padding-right: var(--stb-pr-d, revert-layer);
	padding-bottom: var(--stb-pb-d, revert-layer);
	padding-left: var(--stb-pl-d, revert-layer);
	border-style: solid;
	border-color: currentColor;
	border-width: var(--stb-bdw-d, revert-layer);
	border-radius: var(--stb-bdr-d, revert-layer);
	font-size: var(--stb-fs-d, revert-layer);
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.suntyp-btn--bdw[data-suntyp-btn] .wp-block-button__link {
	border-color: var(--wp--preset--color--border, #e2e8f0);
}

[data-suntyp-btn][data-stb-sz="sm"] .wp-block-button__link {
	padding-top: var(--wp--preset--spacing--30, 0.5rem);
	padding-bottom: var(--wp--preset--spacing--30, 0.5rem);
	padding-left: var(--wp--preset--spacing--40, 0.75rem);
	padding-right: var(--wp--preset--spacing--40, 0.75rem);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
}

[data-suntyp-btn][data-stb-sz="md"] .wp-block-button__link {
	padding-top: var(--wp--preset--spacing--40, 0.75rem);
	padding-bottom: var(--wp--preset--spacing--40, 0.75rem);
	padding-left: var(--wp--preset--spacing--50, 1rem);
	padding-right: var(--wp--preset--spacing--50, 1rem);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

[data-suntyp-btn][data-stb-sz="lg"] .wp-block-button__link {
	padding-top: var(--wp--preset--spacing--50, 1rem);
	padding-bottom: var(--wp--preset--spacing--50, 1rem);
	padding-left: var(--wp--preset--spacing--60, 1.25rem);
	padding-right: var(--wp--preset--spacing--60, 1.25rem);
	font-size: var(--wp--preset--font-size--md, 1rem);
}

[data-suntyp-btn][data-stb-sz="xl"] .wp-block-button__link {
	padding-top: var(--wp--preset--spacing--60, 1.25rem);
	padding-bottom: var(--wp--preset--spacing--60, 1.25rem);
	padding-left: var(--wp--preset--spacing--70, 1.5rem);
	padding-right: var(--wp--preset--spacing--70, 1.5rem);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
}

[data-suntyp-btn][data-stb-va="outline"] .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary, #2563eb);
	border-width: var(--stb-bdw-d, 2px);
}

[data-suntyp-btn][data-stb-va="outline"] .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface, #f8fafc);
}

[data-suntyp-btn][data-stb-va="ghost"] .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary, #2563eb);
	border-width: var(--stb-bdw-d, 0);
	box-shadow: none;
}

[data-suntyp-btn][data-stb-va="ghost"] .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #2563eb) 8%, transparent);
}

[data-suntyp-btn][data-stb-va="soft"] .wp-block-button__link {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #2563eb) 14%, var(--wp--preset--color--base, #fff));
	color: var(--wp--preset--color--primary, #2563eb);
	border-width: var(--stb-bdw-d, 0);
}

[data-suntyp-btn][data-stb-va="soft"] .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #2563eb) 22%, var(--wp--preset--color--base, #fff));
}

[data-suntyp-btn][data-stb-va="gradient"] .wp-block-button__link {
	border-width: var(--stb-bdw-d, 0);
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--primary, #2563eb) 0%,
		var(--wp--preset--color--accent, #0284c7) 100%
	);
	color: var(--wp--preset--color--base, #fff);
}

[data-suntyp-btn][data-stb-va="gradient"] .wp-block-button__link:hover {
	filter: brightness(1.05);
}

.suntyp-btn--hover[data-suntyp-btn] .wp-block-button__link:hover {
	background-color: var(--stb-hbg, revert-layer);
	color: var(--stb-htx, revert-layer);
	border-color: var(--stb-hbc, revert-layer);
}

@media (max-width: 781px) {
	[data-suntyp-btn] {
		width: var(--stb-ww-t, var(--stb-ww-d, fit-content));
		text-align: var(--stb-tal-t, var(--stb-tal-d, inherit));
		margin-top: var(--stb-mt-t, var(--stb-mt-d, revert-layer));
		margin-right: var(--stb-mr-t, var(--stb-mr-d, revert-layer));
		margin-bottom: var(--stb-mb-t, var(--stb-mb-d, revert-layer));
		margin-left: var(--stb-ml-t, var(--stb-ml-d, revert-layer));
	}

	[data-suntyp-btn] .wp-block-button__link {
		gap: var(--stb-ig-t, var(--stb-ig-d, 0));
		width: var(--stb-lw-t, var(--stb-lw-d, auto));
		padding-top: var(--stb-pt-t, var(--stb-pt-d, revert-layer));
		padding-right: var(--stb-pr-t, var(--stb-pr-d, revert-layer));
		padding-bottom: var(--stb-pb-t, var(--stb-pb-d, revert-layer));
		padding-left: var(--stb-pl-t, var(--stb-pl-d, revert-layer));
		border-width: var(--stb-bdw-t, var(--stb-bdw-d, revert-layer));
		border-radius: var(--stb-bdr-t, var(--stb-bdr-d, revert-layer));
		font-size: var(--stb-fs-t, var(--stb-fs-d, revert-layer));
	}
}

@media (max-width: 480px) {
	[data-suntyp-btn] {
		width: var(--stb-ww-m, var(--stb-ww-t, var(--stb-ww-d, fit-content)));
		text-align: var(--stb-tal-m, var(--stb-tal-t, var(--stb-tal-d, inherit)));
		margin-top: var(--stb-mt-m, var(--stb-mt-t, var(--stb-mt-d, revert-layer)));
		margin-right: var(--stb-mr-m, var(--stb-mr-t, var(--stb-mr-d, revert-layer)));
		margin-bottom: var(--stb-mb-m, var(--stb-mb-t, var(--stb-mb-d, revert-layer)));
		margin-left: var(--stb-ml-m, var(--stb-ml-t, var(--stb-ml-d, revert-layer)));
	}

	[data-suntyp-btn] .wp-block-button__link {
		gap: var(--stb-ig-m, var(--stb-ig-t, var(--stb-ig-d, 0)));
		width: var(--stb-lw-m, var(--stb-lw-t, var(--stb-lw-d, auto)));
		padding-top: var(--stb-pt-m, var(--stb-pt-t, var(--stb-pt-d, revert-layer)));
		padding-right: var(--stb-pr-m, var(--stb-pr-t, var(--stb-pr-d, revert-layer)));
		padding-bottom: var(--stb-pb-m, var(--stb-pb-t, var(--stb-pb-d, revert-layer)));
		padding-left: var(--stb-pl-m, var(--stb-pl-t, var(--stb-pl-d, revert-layer)));
		border-width: var(--stb-bdw-m, var(--stb-bdw-t, var(--stb-bdw-d, revert-layer)));
		border-radius: var(--stb-bdr-m, var(--stb-bdr-t, var(--stb-bdr-d, revert-layer)));
		font-size: var(--stb-fs-m, var(--stb-fs-t, var(--stb-fs-d, revert-layer)));
	}
}

@supports not (color: color-mix(in srgb, red, blue)) {
	[data-suntyp-btn][data-stb-va="ghost"] .wp-block-button__link:hover {
		background: var(--wp--preset--color--surface, #f1f5f9);
	}

	[data-suntyp-btn][data-stb-va="soft"] .wp-block-button__link {
		background: var(--wp--preset--color--surface, #f1f5f9);
	}

	[data-suntyp-btn][data-stb-va="soft"] .wp-block-button__link:hover {
		background: var(--wp--preset--color--border, #e2e8f0);
	}
}