/**
 * Klappbare Farbauswahl fuer Avada-Farbswatches.
 *
 * Die Klasse .dst-farbwaehler setzt ausschliesslich das JavaScript. Ohne JS
 * greift keine dieser Regeln und das Raster bleibt offen wie bisher.
 */

.dst-farbwaehler {
	display: block;
	position: relative;
}

/* --- Schaltflaeche im geschlossenen Zustand --------------------------- */

.dst-farbwaehler__toggle {
	display: flex;
	align-items: center;
	gap: 0.65em;
	width: 100%;
	min-height: var( --form_input_height, 40px );
	margin: 0;
	padding: 0.35em 0.75em;
	border: 1px solid var( --form_border_color, #d2d2d2 );
	border-radius: var( --form_border_radius, 4px );
	background: var( --form_bg_color, #fff );
	color: var( --form_text_color, inherit );
	font-size: inherit;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.dst-farbwaehler__toggle:hover,
.dst-farbwaehler__toggle:focus-visible {
	border-color: var( --primary_color, #d51083 );
}

.dst-farbwaehler__punkt {
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 3px;
}

/* Noch nichts gewaehlt: Schraffur statt Farbflaeche. */
.dst-farbwaehler__punkt--leer {
	background-image: linear-gradient(
		135deg,
		transparent 45%, rgba( 0, 0, 0, 0.25 ) 45%,
		rgba( 0, 0, 0, 0.25 ) 55%, transparent 55%
	);
}

.dst-farbwaehler__name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dst-farbwaehler__toggle--leer .dst-farbwaehler__name {
	opacity: 0.6;
}

.dst-farbwaehler__pfeil {
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-inline-start: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -0.15em ) rotate( 45deg );
	transition: transform 0.15s ease;
}

.dst-farbwaehler--offen .dst-farbwaehler__pfeil {
	transform: translateY( 0.1em ) rotate( 225deg );
}

/* --- Aufgeklapptes Farbraster ---------------------------------------- */

.dst-farbwaehler__panel {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
	padding: 10px;
	max-height: 45vh;
	overflow-y: auto;
	border: 1px solid var( --form_border_color, #d2d2d2 );
	border-radius: var( --form_border_radius, 4px );
	background: var( --form_bg_color, #fff );
}

.dst-farbwaehler:not( .dst-farbwaehler--offen ) .dst-farbwaehler__panel {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.dst-farbwaehler__pfeil {
		transition: none;
	}
}