/**
 * @file background.css
 * Background paint for the five decorative surface hosts, and the stop for
 * page-lane signals at each host's content.
 *
 * Each selected surface resets the inherited text, link, border, divider and
 * focus roles for its subtree, and sets the private --_color-background and
 * --_color-foreground. The position, fit, repeat and attachment options each
 * set only their own longhand (background-position-x or -y, background-size,
 * background-repeat or background-attachment), so no choice overwrites
 * another. Each of these longhands lists one comma-separated value per layer:
 * the color overlay first and the image second. This is the layer order of
 * the inline background-image that templates/background-attributes.html.twig
 * writes. The helper writes every option, with its fallback, whenever it
 * writes an image, so the hosts need no default position of their own.
 * When no surface is chosen, each component's own CSS sets
 * --_color-background and --_color-foreground on its root, so a nested
 * component never inherits either value from an outer component.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_percentage-backgroundOverlayOpacity : Overlay opacity; defaults to 80%.
 * --_color-backgroundOverlay             : Resolved overlay color, or transparent.
 * --_color-background                    : Resolved surface color for the host root.
 * --_color-foreground                    : Resolved foreground color for the host root.
 */
:where(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
) {
  --_percentage-backgroundOverlayOpacity: 80%;

  background-color: var(--_color-background);

  /*
   * A Container or Grid nested inside one of these components adds no page-lane
   * padding and does not extend to the page edge.
   */
  & > * {
    --marsal-length-lane: 0px;
    --marsal-length-edge: 0px;
    --marsal-length-edgeStart: 0px;
    --marsal-length-edgeEnd: 0px;
  }
}

/*
 * The rules below name the five hosts once in :is() and the choice once after
 * it. The whole compound stays inside :where(), so each rule keeps zero
 * specificity.
 */
:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
):not([data-background-blend-mode="overlay"])) {
  --_color-backgroundOverlay: transparent;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-blend-mode="overlay"]) {
  --_color-backgroundOverlay: color-mix(
    in srgb,
    var(--_color-background) var(--_percentage-backgroundOverlayOpacity),
    transparent
  );
}

/*
 * A selected surface is a color-role boundary, not just background paint.
 * Neutral surfaces restore the active theme even inside a dark surface.
 * Host plus surface outweigh [data-theme] when both share one root, even
 * when Drupal orders the Background library before the foundation library.
 * Only the five Background hosts participate; unsurfaced hosts inherit roles.
 * Fixed surface/foreground pairs are not remapped: an opaque Brand panel or
 * a control still needs the colors paired with its own paint.
 */
:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
):is(
  [data-background-surface="canvas"],
  [data-background-surface="primary"],
  [data-background-surface="subtle"]
) {
  --marsal-color-textPrimary: var(--marsal-color-textPrimaryTheme);
  --marsal-color-textStrong: var(--marsal-color-textStrongTheme);
  --marsal-color-textMuted: var(--marsal-color-textMutedTheme);
  --marsal-color-textBrand: var(--marsal-color-textBrandTheme);
  --marsal-color-link: var(--marsal-color-linkTheme);
  --marsal-color-borderSubtle: var(--marsal-color-borderSubtleTheme);
  --marsal-color-borderDefault: var(--marsal-color-borderDefaultTheme);
  --marsal-color-borderControl: var(--marsal-color-borderControlTheme);
  --marsal-color-borderInteractive: var(--marsal-color-borderInteractiveTheme);
  --marsal-color-borderAccent: var(--marsal-color-borderAccentTheme);
  --marsal-color-dividerAccent: var(--marsal-color-dividerAccentTheme);
  --marsal-color-focusRing: var(--marsal-color-focusRingTheme);
  --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastTheme);
}

:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
):is(
  [data-background-surface="brand"],
  [data-background-surface="scrim"]
) {
  --marsal-color-textPrimary: var(--marsal-color-textOnBrand);
  --marsal-color-textStrong: var(--marsal-color-textOnBrand);
  --marsal-color-textMuted: var(--marsal-color-textMutedOnDark);
  --marsal-color-textBrand: var(--marsal-color-textAccentOnBrand);
  --marsal-color-link: var(--marsal-color-linkOnBrand);
  --marsal-color-borderSubtle: var(--marsal-color-borderSubtleOnDark);
  --marsal-color-borderDefault: var(--marsal-color-borderOnDark);
  --marsal-color-borderControl: var(--marsal-color-borderOnDark);
  --marsal-color-borderInteractive: var(--marsal-color-borderOnDark);
  --marsal-color-borderAccent: var(--marsal-color-borderAccentOnDark);
  --marsal-color-dividerAccent: var(--marsal-color-borderAccentOnDark);
  --marsal-color-focusRing: var(--marsal-color-focusRingOnDark);
  --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastOnDark);
}

:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
):is(
  [data-background-surface="interactive"]
) {
  --marsal-color-textPrimary: var(--marsal-color-textOnBrand);
  --marsal-color-textStrong: var(--marsal-color-textOnBrand);
  --marsal-color-textMuted: var(--marsal-color-textMutedOnDark);
  --marsal-color-textBrand: var(--marsal-color-textAccentOnInteractive);
  --marsal-color-link: var(--marsal-color-linkOnBrand);
  --marsal-color-borderSubtle: var(--marsal-color-borderSubtleOnDark);
  --marsal-color-borderDefault: var(--marsal-color-borderOnDark);
  --marsal-color-borderControl: var(--marsal-color-borderOnDark);
  --marsal-color-borderInteractive: var(--marsal-color-borderOnDark);
  --marsal-color-borderAccent: var(--marsal-color-borderAccentOnDark);
  --marsal-color-dividerAccent: var(--marsal-color-borderAccentOnDark);
  --marsal-color-focusRing: var(--marsal-color-focusRingOnDark);
  --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastOnDark);
}

:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
):is(
  [data-background-surface="accent"]
) {
  --marsal-color-textPrimary: var(--marsal-color-textOnAccent);
  --marsal-color-textStrong: var(--marsal-color-textOnAccent);
  --marsal-color-textMuted: var(--marsal-color-textMutedOnAccent);
  --marsal-color-textBrand: var(--marsal-color-textOnAccent);
  --marsal-color-link: var(--marsal-color-linkOnAccent);
  --marsal-color-borderSubtle: var(--marsal-color-borderSubtleOnAccent);
  --marsal-color-borderDefault: var(--marsal-color-borderOnAccent);
  --marsal-color-borderControl: var(--marsal-color-borderOnAccent);
  --marsal-color-borderInteractive: var(--marsal-color-borderOnAccent);
  --marsal-color-borderAccent: var(--marsal-color-borderOnAccent);
  --marsal-color-dividerAccent: var(--marsal-color-borderOnAccent);
  --marsal-color-focusRing: var(--marsal-color-focusRingTheme);
  --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastTheme);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-surface="canvas"]) {
  --_color-background: var(--marsal-color-surfaceCanvas);
  --_color-foreground: var(--marsal-color-textPrimary);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-surface="primary"]) {
  --_color-background: var(--marsal-color-surfacePrimary);
  --_color-foreground: var(--marsal-color-textPrimary);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-surface="subtle"]) {
  --_color-background: var(--marsal-color-surfaceSubtle);
  --_color-foreground: var(--marsal-color-textPrimary);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-surface="brand"]) {
  --_color-background: var(--marsal-color-surfaceBrand);
  --_color-foreground: var(--marsal-color-textOnBrand);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-surface="interactive"]) {
  --_color-background: var(--marsal-color-surfaceInteractive);
  --_color-foreground: var(--marsal-color-textOnInteractive);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-surface="accent"]) {
  --_color-background: var(--marsal-color-surfaceAccent);
  --_color-foreground: var(--marsal-color-textOnAccent);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-surface="scrim"]) {
  --_color-background: var(--marsal-color-surfaceScrim);
  --_color-foreground: var(--marsal-color-textOnBrand);
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-inline="center"]) {
  background-position-x: 0%, 50%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-block="center"]) {
  background-position-y: 0%, 50%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-inline="start"]:dir(ltr)) {
  background-position-x: 0%, 0%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-inline="start"]:dir(rtl)) {
  background-position-x: 0%, 100%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-block="start"]) {
  background-position-y: 0%, 0%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-inline="end"]:dir(ltr)) {
  background-position-x: 0%, 100%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-inline="end"]:dir(rtl)) {
  background-position-x: 0%, 0%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-position-block="end"]) {
  background-position-y: 0%, 100%;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-fit="auto"]) {
  background-size: 100% 100%, auto;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-fit="cover"]) {
  background-size: 100% 100%, cover;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-fit="contain"]) {
  background-size: 100% 100%, contain;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-repeat="no_repeat"]) {
  background-repeat: no-repeat, no-repeat;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-repeat="repeat"]) {
  background-repeat: no-repeat, repeat;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-repeat="repeat_inline"]) {
  background-repeat: no-repeat, repeat no-repeat;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-repeat="repeat_block"]) {
  background-repeat: no-repeat, no-repeat repeat;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-attachment="scroll"]) {
  background-attachment: scroll, scroll;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-attachment="fixed"]) {
  background-attachment: scroll, fixed;
}

:where(:is(
  [data-component-id="marsal_sdc:container"],
  [data-component-id="marsal_sdc:card"],
  [data-component-id="marsal_sdc:content_header"],
  [data-component-id="marsal_sdc:carousel_item"],
  [data-component-id="marsal_sdc:callout"]
)[data-background-attachment="local"]) {
  background-attachment: scroll, local;
}