/**
 * Block-Override: core/button – REFERENZ-BEISPIEL aus dem TBZ-Projekt.
 *
 * Button-Varianten-Set (Standard bei jedem Projekt):
 * - Voll (gefüllt):   Default aus theme.json (styles.elements.button)
 * - Outline:          theme.json styles.blocks.core/button.variations.outline
 * - Mit Icon:         .is-style-spnkt-button-icon / -left / -down (unten,
 *                     registriert in inc/editor-setup.php)
 * - Nur Text:         .is-style-spnkt-button-text (unten)
 *
 * Muster: Kontext-Varianten (.is-style-spnkt-bg-*) auf dem umgebenden
 * Group-Block invertieren die Button-Farben.
 *
 * Bei Projektstart: an das Projekt-Design anpassen; nicht benötigte Varianten
 * hier UND in inc/editor-setup.php entfernen.
 */
.is-style-spnkt-button-icon .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	padding-left: 0;
}

.is-style-spnkt-button-icon .wp-block-button__link.wp-element-button::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--primary);
	mask-image: url("../../images/pfeil.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
    transform: translate(0,1px);
    will-change: transform;
    transition: transform 0.3s ease;
}

.is-style-spnkt-button-icon .wp-block-button__link.wp-element-button:hover::after,
.is-style-spnkt-button-icon .wp-block-button__link.wp-element-button:focus-visible::after {
    transform: translate(1rem,1px);
}

.is-style-spnkt-bg-primary .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button::after,
.is-style-spnkt-bg-primary-dark .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button::after,
.is-style-spnkt-bg-ink .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button::after,
.is-style-spnkt-bg-ink-dark .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button::after {
    background-color: var(--wp--preset--color--background);
}

.is-style-spnkt-bg-primary .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-primary-dark .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink-dark .is-style-spnkt-button-icon .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--background);
}

.is-style-spnkt-button-icon .wp-block-button__link.wp-element-button{
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.is-style-spnkt-button-icon .wp-element-button,
.is-style-spnkt-button-icon .wp-block-button__link {
	background-color: transparent;
}

/* Variante: Icon links statt rechts. */
.is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	padding-left: 0;
}

.is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--primary);
	mask-image: url("../../images/pfeil.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
    transform: translate(0,1px);
    will-change: transform;
    transition: transform 0.3s ease;
}

.is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button:hover::before,
.is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button:focus-visible::before {
    transform: translate(0.3rem,1px);
}

.is-style-spnkt-bg-primary .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button::before,
.is-style-spnkt-bg-primary-dark .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button::before,
.is-style-spnkt-bg-ink .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button::before,
.is-style-spnkt-bg-ink-dark .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button::before {
    background-color: var(--wp--preset--color--background);
}

.is-style-spnkt-bg-primary .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-primary-dark .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink-dark .is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--background);
}

.is-style-spnkt-button-icon-left .wp-block-button__link.wp-element-button{
    display: flex;
    gap: 10px;
    align-items: top;
	text-align: left;
}

.is-style-spnkt-button-icon-left .wp-element-button,
.is-style-spnkt-button-icon-left .wp-block-button__link {
	background-color: transparent;
}


/* Variante: Icon links, nach unten. */
.is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--primary);
	font-weight: 400;
	padding: 0.25em 0;
}

.is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	mask-image: url("../../images/pfeil.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
    will-change: transform;
    transition: transform 0.3s ease;
    transform: translate(0,-20px) rotate(90deg);
}

.is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button:focus-visible {
	color: var(--wp--preset--color--foreground);
}

.is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button:hover::before,
.is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button:focus-visible::before {
	transform: translate(-.5rem,-20px) rotate(90deg);
}

.is-style-spnkt-bg-primary .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button::before,
.is-style-spnkt-bg-primary-dark .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button::before,
.is-style-spnkt-bg-ink .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button::before,
.is-style-spnkt-bg-ink-dark .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button::before {
    background-color: var(--wp--preset--color--background);
}

.is-style-spnkt-bg-primary .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-primary-dark .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink-dark .is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--background);
}

.is-style-spnkt-button-icon-down .wp-block-button__link.wp-element-button{
    display: flex;
    gap: 10px;
    align-items: center;
}

.is-style-spnkt-button-icon-down .wp-element-button,
.is-style-spnkt-button-icon-down .wp-block-button__link {
	background-color: transparent;
}


/* Variante: Nur Text (ohne Icon, ohne Füllung). */
.is-style-spnkt-button-text .wp-block-button__link.wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	padding: 0.25em 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.is-style-spnkt-button-text .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-button-text .wp-block-button__link.wp-element-button:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

.is-style-spnkt-bg-primary .is-style-spnkt-button-text .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-primary-dark .is-style-spnkt-button-text .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink .is-style-spnkt-button-text .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink-dark .is-style-spnkt-button-text .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--background);
}

/*
 * Standard-Button (voll gefüllt, primary-farbener Hintergrund laut theme.json)
 * und Outline-Variante auf farblich nahem Kontext-Hintergrund
 * (spnkt-bg-primary/-dark, spnkt-bg-ink/-dark): Primary auf Primary bzw.
 * Primary auf Anthrazit unterschreitet je nach Site den WCAG-AA-Kontrast
 * (min. 3:1 für UI-Komponenten). Invertiert auf hellen Hintergrund mit
 * dunkler Schrift.
 */
.is-style-spnkt-bg-primary .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-primary-dark .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink-dark .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary-dark);
}

.is-style-spnkt-bg-primary .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-primary .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:focus-visible,
.is-style-spnkt-bg-primary-dark .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-primary-dark .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:focus-visible,
.is-style-spnkt-bg-ink .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-ink .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:focus-visible,
.is-style-spnkt-bg-ink-dark .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-ink-dark .wp-block-button:not(.is-style-outline, .is-style-spnkt-button-icon, .is-style-spnkt-button-icon-left, .is-style-spnkt-button-icon-down, .is-style-spnkt-button-text) .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--light);
}

.is-style-spnkt-bg-primary .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-primary-dark .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button,
.is-style-spnkt-bg-ink-dark .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	border-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--background);
}

.is-style-spnkt-bg-primary .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-primary .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:focus-visible,
.is-style-spnkt-bg-primary-dark .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-primary-dark .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:focus-visible,
.is-style-spnkt-bg-ink .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-ink .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:focus-visible,
.is-style-spnkt-bg-ink-dark .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover,
.is-style-spnkt-bg-ink-dark .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:focus-visible {
	color: var(--wp--preset--color--light);
	border-color: var(--wp--preset--color--light);
}