/**
 * Site colour samples for the existing paragraph option cards.
 * CSS also applies to cards inserted by Layout Paragraphs AJAX dialogs.
 * Only the preview swatch is coloured; Gin controls retain their own accent.
 */

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:is([value="accent_colour_1"], [value="accent-1"], [value="accent_1"]) + label.option {
  --ulah-swatch: var(--site-accent-1, var(--ulah-site-accent-1, #ed1970));
}

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:is([value="accent_colour_2"], [value="accent-2"], [value="accent_2"]) + label.option {
  --ulah-swatch: var(--site-accent-2, var(--ulah-site-accent-2, #24afe3));
}

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:is([value="accent_colour_3"], [value="accent-3"], [value="accent_3"]) + label.option {
  --ulah-swatch: var(--site-accent-3, var(--ulah-site-accent-3, #f4bd19));
}

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:is([value="accent_colour_4"], [value="accent-4"], [value="accent_4"]) + label.option {
  --ulah-swatch: var(--site-accent-4, var(--ulah-site-accent-4, #39b54a));
}

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:is([value="primary"], [value="background_primary"]) + label.option {
  --ulah-swatch: var(--bs-primary, var(--primary, var(--ulah-site-primary, #0d6efd)));
}

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:is([value="secondary"], [value="background_secondary"]) + label.option {
  --ulah-swatch: var(--bs-secondary, var(--secondary, var(--ulah-site-secondary, #6c757d)));
}

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:is(
  [value="accent_colour_1"], [value="accent-1"], [value="accent_1"],
  [value="accent_colour_2"], [value="accent-2"], [value="accent_2"],
  [value="accent_colour_3"], [value="accent-3"], [value="accent_3"],
  [value="accent_colour_4"], [value="accent-4"], [value="accent_4"],
  [value="primary"], [value="background_primary"],
  [value="secondary"], [value="background_secondary"]
) + label.option::before {
  content: "";
  display: block;
  width: 58px;
  height: 42px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: var(--ulah-swatch);
  border: 2px solid var(--option-preview-border, #8b91a0);
  border-radius: var(--option-radius, 8px);
}

:is(.bg-style-wrapper, .field--name-field-colour-palette) input:checked + label.option::before {
  border-color: var(--option-selected, var(--gin-color-primary, #0066cc));
}