/**
 * @file container.css
 * @component Container (Layout)
 * @description Provides container backgrounds, block spacing, dividers, content width, text alignment, and the page lane.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_color-background                    : Resolved semantic surface color.
 * --_color-foreground                    : Resolved semantic foreground color.
 * --_length-insetStart                   : Inherited page lane plus the start edge a Grid hands out.
 * --_length-insetEnd                     : Inherited page lane plus the end edge a Grid hands out.
 */
:where([data-component-id="marsal_sdc:container"]) {
  --_length-insetStart: calc(var(--marsal-length-lane) + var(--marsal-length-edgeStart));
  --_length-insetEnd: calc(var(--marsal-length-lane) + var(--marsal-length-edgeEnd));

  display: flow-root;
  box-sizing: border-box;
  min-inline-size: 0;
  /* A handed-out window or half-gap edge extends paint; equal padding keeps content in place. */
  margin-inline-start: calc(-1 * var(--marsal-length-edgeStart));
  margin-inline-end: calc(-1 * var(--marsal-length-edgeEnd));
  padding-block: var(--marsal-space-sectionGap);
  padding-inline-start: var(--_length-insetStart);
  padding-inline-end: var(--_length-insetEnd);
  color: var(--_color-foreground, inherit);

  &[data-padding-before="none"] {
    padding-block-start: 0;
  }

  &[data-padding-before="tight"] {
    padding-block-start: var(--marsal-space-m-xl);
  }

  &[data-padding-before="loose"] {
    padding-block-start: var(--marsal-space-xl-4xl);
  }

  &[data-padding-after="none"] {
    padding-block-end: 0;
  }

  &[data-padding-after="tight"] {
    padding-block-end: var(--marsal-space-m-xl);
  }

  &[data-padding-after="loose"] {
    padding-block-end: var(--marsal-space-xl-4xl);
  }

  /* Band spacing omits the padding choices, so only these rules set the block padding. */
  &[data-band-spacing="statement"] {
    padding-block: calc(var(--marsal-space-2xl) / 2);
  }

  &[data-band-spacing="display_statement"] {
    padding-block: var(--marsal-space-l-xl);
  }

  &[data-band-spacing="call_to_action"] {
    padding-block: var(--marsal-space-l-xl);
  }

  /* Statement bands span the page, so their 40rem spacing step follows the viewport. */
  @media (min-width: 40rem) {
    &[data-band-spacing="statement"] {
      padding-block: var(--marsal-space-2xl);
    }

    &[data-band-spacing="display_statement"] {
      padding-block: var(--marsal-space-2xl-4xl);
    }
  }

  &:is([data-divider="before"], [data-divider="both"]) {
    border-block-start: 1px solid var(--marsal-color-borderSubtle);

    &[data-divider-before-style="accent"] {
      border-block-start-width: var(--marsal-length-dividerAccent);
      border-block-start-color: var(--marsal-color-dividerAccent);
    }
  }

  &:is([data-divider="after"], [data-divider="both"]) {
    border-block-end: 1px solid var(--marsal-color-borderSubtle);

    &[data-divider-after-style="accent"] {
      border-block-end-width: var(--marsal-length-dividerAccent);
      border-block-end-color: var(--marsal-color-dividerAccent);
    }
  }

  &:is([data-divider-inline="start"], [data-divider-inline="both"]) {
    border-inline-start: 1px solid var(--marsal-color-borderSubtle);
    padding-inline-start: calc(var(--_length-insetStart) + var(--marsal-space-s));

    &[data-divider-inline-start-style="accent"] {
      border-inline-start-width: var(--marsal-length-dividerAccent);
      border-inline-start-color: var(--marsal-color-dividerAccent);
    }
  }

  &:is([data-divider-inline="end"], [data-divider-inline="both"]) {
    border-inline-end: 1px solid var(--marsal-color-borderSubtle);
    padding-inline-end: calc(var(--_length-insetEnd) + var(--marsal-space-s));

    &[data-divider-inline-end-style="accent"] {
      border-inline-end-width: var(--marsal-length-dividerAccent);
      border-inline-end-color: var(--marsal-color-dividerAccent);
    }
  }

  & > .marsal-container__content {
    inline-size: 100%;
    max-inline-size: var(--marsal-length-contentWidth-standard);
    margin-inline: auto;
  }

  &[data-content-width="narrow"] > .marsal-container__content {
    max-inline-size: var(--marsal-length-contentWidth-narrow);
  }

  &[data-content-width="wide"] > .marsal-container__content {
    max-inline-size: var(--marsal-length-contentWidth-wide);
  }

  &[data-content-width="very_wide"] > .marsal-container__content {
    max-inline-size: var(--marsal-length-contentWidth-veryWide);
  }

  &[data-content-width="full"] > .marsal-container__content {
    max-inline-size: none;
  }

  &[data-alignment="center"] > .marsal-container__content {
    text-align: center;
  }
}

/* Inside a Grid column the lane is zero, so a painted Container keeps its content off the painted edge. */
:where([data-component-id="marsal_sdc:grid_item"]) :where([data-component-id="marsal_sdc:container"][data-background-surface]) {
  --_length-insetStart: max(calc(var(--marsal-length-lane) + var(--marsal-length-edgeStart)), var(--marsal-space-s-m));
  --_length-insetEnd: max(calc(var(--marsal-length-lane) + var(--marsal-length-edgeEnd)), var(--marsal-space-s-m));
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"]) :where([data-component-id="marsal_sdc:container"][data-background-surface]) {
  /* Inherited edges reach a painted Container through Grid Items and section stacks. */
  @container not style(--marsal-length-edgeStart: 0px) {
    --_length-insetStart: calc(var(--marsal-length-lane) + var(--marsal-length-edgeStart));
  }

  @container not style(--marsal-length-edgeEnd: 0px) {
    --_length-insetEnd: calc(var(--marsal-length-lane) + var(--marsal-length-edgeEnd));
  }
}

/* An explicit window edge is supplied on Container itself, after inheritance. */
:where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="both"])) > :where([data-component-id="marsal_sdc:container"][data-background-surface]),
:where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="both"])) > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-background-surface]) {
  --_length-insetStart: calc(var(--marsal-length-lane) + var(--marsal-length-edgeStart));
}

:where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="end"], [data-window-edge="both"])) > :where([data-component-id="marsal_sdc:container"][data-background-surface]),
:where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="end"], [data-window-edge="both"])) > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"][data-background-surface]) {
  --_length-insetEnd: calc(var(--marsal-length-lane) + var(--marsal-length-edgeEnd));
}

:where([data-component-id="marsal_sdc:container"]:not([data-background-surface])) {
  --_color-background: transparent;
  --_color-foreground: initial;
}