/* style.css – Frontend + Editor Styles für "BesD-line" inkl. Swatch-UI (wie BESD Inline-Typo). */

.wp-block-besd-line,
.besd-line{
  width: 100%;
  height: 2px;
  background: #111;
  border: 0;
  display: block;
  margin: 0;
}

/* Linienfarben über CSS-Variablen (mit Fallbacks) */
.besd-line.is-c1{ background: var(--besd-color-1, rgb(246, 0, 255)); }
.besd-line.is-c2{ background: var(--besd-color-2, rgb(240, 0, 120)); }
.besd-line.is-c3{ background: var(--besd-color-3, rgb(255, 65, 0)); }
.besd-line.is-c4{ background: var(--besd-color-4, rgb(1, 1, 1)); }

/* ===== Inspector UI: Swatches (wie in deinem Block) ===== */
.besd-typo-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* Farb-Swatches (erzwinge Hintergrund gg. WP-Button-Styles) */
.besd-typo-swatches { display: flex; gap: 10px; align-items: center; margin-top: .25rem; }
.components-button.besd-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  padding: 0;
  min-width: 28px;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) !important;
  background: transparent; /* tatsächliche Farbe kommt inline per style */
}
.components-button.besd-swatch.is-active {
  box-shadow: 0 0 0 2px #111 !important;
}