/* "Sprechblase"-Block-Styles für core/group (Material Design 3): eine Karte
 * mit einer CSS-Border-Dreieck-Spitze an einer von vier Kanten, ausgewählt
 * über den nativen Block-Stil-Picker (siehe Module::register_styles()) statt
 * eines eigenen Blocks/Attributs. Tokens aus dem Twh-Modul (--md-sys-*), wie
 * in cards.css/amgr.css, für projektweit konsistente Radien/Schatten.
 */
@import url('../../../Twh/assets/css/md3-tokens.generated.css');
@import url('../../../Twh/assets/css/md3-base.css');

.wp-block-group[class*="is-style-sprechblase-"] {
	/* Feste Light-Werte statt der global umschaltbaren --md-sys-color-*-
	 * Tokens (siehe cards.css-Kommentar zum selben Thema) — die Dreieck-
	 * Spitze (::after) muss exakt dieselbe Farbe wie der Hintergrund treffen,
	 * das funktioniert nur mit einem festen, nicht Dark-Mode-abhängigen Wert. */
	--amhp-sprechblase-bg: #ffffff;
	--amhp-sprechblase-spitze: 1rem;

	position: relative;
	background: var( --amhp-sprechblase-bg );
	border-radius: var( --md-sys-shape-corner-large );
	box-shadow: var( --md-sys-elevation-1 );
	padding: 1.5rem;
}

.wp-block-group.is-style-sprechblase-oben::after,
.wp-block-group.is-style-sprechblase-unten::after,
.wp-block-group.is-style-sprechblase-links::after,
.wp-block-group.is-style-sprechblase-rechts::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

/* Spitze oben: Dreieck zeigt nach oben, an der Oberkante zentriert. */
.wp-block-group.is-style-sprechblase-oben {
	margin-top: var( --amhp-sprechblase-spitze );
}

.wp-block-group.is-style-sprechblase-oben::after {
	top: calc( -1 * var( --amhp-sprechblase-spitze ) );
	left: 50%;
	transform: translateX( -50% );
	border-left: var( --amhp-sprechblase-spitze ) solid transparent;
	border-right: var( --amhp-sprechblase-spitze ) solid transparent;
	border-bottom: var( --amhp-sprechblase-spitze ) solid var( --amhp-sprechblase-bg );
}

/* Spitze unten: Dreieck zeigt nach unten, an der Unterkante zentriert. */
.wp-block-group.is-style-sprechblase-unten {
	margin-bottom: var( --amhp-sprechblase-spitze );
}

.wp-block-group.is-style-sprechblase-unten::after {
	bottom: calc( -1 * var( --amhp-sprechblase-spitze ) );
	left: 50%;
	transform: translateX( -50% );
	border-left: var( --amhp-sprechblase-spitze ) solid transparent;
	border-right: var( --amhp-sprechblase-spitze ) solid transparent;
	border-top: var( --amhp-sprechblase-spitze ) solid var( --amhp-sprechblase-bg );
}

/* Spitze links: Dreieck zeigt nach links, an der linken Kante zentriert. */
.wp-block-group.is-style-sprechblase-links {
	margin-left: var( --amhp-sprechblase-spitze );
}

.wp-block-group.is-style-sprechblase-links::after {
	left: calc( -1 * var( --amhp-sprechblase-spitze ) );
	top: 50%;
	transform: translateY( -50% );
	border-top: var( --amhp-sprechblase-spitze ) solid transparent;
	border-bottom: var( --amhp-sprechblase-spitze ) solid transparent;
	border-right: var( --amhp-sprechblase-spitze ) solid var( --amhp-sprechblase-bg );
}

/* Spitze rechts: Dreieck zeigt nach rechts, an der rechten Kante zentriert. */
.wp-block-group.is-style-sprechblase-rechts {
	margin-right: var( --amhp-sprechblase-spitze );
}

.wp-block-group.is-style-sprechblase-rechts::after {
	right: calc( -1 * var( --amhp-sprechblase-spitze ) );
	top: 50%;
	transform: translateY( -50% );
	border-top: var( --amhp-sprechblase-spitze ) solid transparent;
	border-bottom: var( --amhp-sprechblase-spitze ) solid transparent;
	border-left: var( --amhp-sprechblase-spitze ) solid var( --amhp-sprechblase-bg );
}