/**
 * @file flex.css
 * @component Flex (Layout)
 * @description Arranges unrestricted direct children along one flexible axis.
 *
 * @section Public custom properties
 * --flex-space-gap-tight                    : Gap; defaults to space-3xs.
 * --flex-space-gap-standard                 : Gap; defaults to space-s.
 * --flex-space-gap-loose                    : Gap; defaults to space-l.
 * --flex-space-gap-veryLoose                : Gap; defaults to space-xl.
 * --flex-space-gap-expanded                 : Expanded gap for every Flex whose gap is not none.
 * --flex-space-gap-print                    : Print gap for every Flex whose gap is not none.
 * --flex-length-maximumInlineSize           : Compact maximum inline size for column-to-row Flex, Narrow stacked width included.
 * --flex-length-maximumInlineSize-expanded  : Expanded maximum inline size for column-to-row Flex.
 * --flex-length-maximumInlineSize-print     : Print maximum inline size for column-to-row Flex.
 *
 * @section Private custom properties
 * --_space-gap : Selected gap, reset on each Flex root.
 */
:where([data-component-id="marsal_sdc:flex"]) {
  --_space-gap: var(--flex-space-gap-standard, var(--marsal-space-s));

  display: flex;
  min-inline-size: 0;
}

:where([data-component-id="marsal_sdc:flex"][data-direction="row"]) {
  flex-direction: row;
}

:where([data-component-id="marsal_sdc:flex"][data-direction="column"]) {
  flex-direction: column;
}

:where([data-component-id="marsal_sdc:flex"][data-direction="column_to_row"]) {
  flex-direction: column;
  gap: var(--_space-gap);
  max-inline-size: var(--flex-length-maximumInlineSize, none);
}

/* A Narrow stacked width fills its column up to the cap, even where its parent centers it. */
:where([data-component-id="marsal_sdc:flex"][data-direction="column_to_row"][data-stacked-width="narrow"]) {
  inline-size: 100%;
}

/* The choice sits outside :where(), so this compound selector, not source order, caps the stacked column. */
@media screen and (width < 55.25rem) {
  :where([data-component-id="marsal_sdc:flex"][data-direction="column_to_row"])[data-stacked-width="narrow"] {
    max-inline-size: var(--flex-length-maximumInlineSize, 26rem);
  }
}

:where([data-component-id="marsal_sdc:flex"][data-wrap="true"]) {
  flex-wrap: wrap;
}

:where([data-component-id="marsal_sdc:flex"][data-wrap="false"]) {
  flex-wrap: nowrap;
}

:where([data-component-id="marsal_sdc:flex"][data-distribution="start"]) {
  justify-content: flex-start;
}

:where([data-component-id="marsal_sdc:flex"][data-distribution="center"]) {
  justify-content: center;
}

:where([data-component-id="marsal_sdc:flex"][data-distribution="end"]) {
  justify-content: flex-end;
}

:where([data-component-id="marsal_sdc:flex"][data-distribution="space_between"]) {
  justify-content: space-between;
}

:where([data-component-id="marsal_sdc:flex"][data-alignment="start"]) {
  align-items: flex-start;
}

:where([data-component-id="marsal_sdc:flex"][data-alignment="center"]) {
  align-items: center;
}

:where([data-component-id="marsal_sdc:flex"][data-alignment="end"]) {
  align-items: flex-end;
}

:where([data-component-id="marsal_sdc:flex"][data-alignment="stretch"]) {
  align-items: stretch;
}

:where([data-component-id="marsal_sdc:flex"][data-gap="none"]) {
  --_space-gap: 0;

  gap: var(--_space-gap);
}

:where([data-component-id="marsal_sdc:flex"][data-gap="tight"]) {
  --_space-gap: var(--flex-space-gap-tight, var(--marsal-space-3xs));

  gap: var(--_space-gap);
}

:where([data-component-id="marsal_sdc:flex"][data-gap="standard"]) {
  --_space-gap: var(--flex-space-gap-standard, var(--marsal-space-s));

  gap: var(--_space-gap);
}

:where([data-component-id="marsal_sdc:flex"][data-gap="loose"]) {
  --_space-gap: var(--flex-space-gap-loose, var(--marsal-space-l));

  gap: var(--_space-gap);
}

:where([data-component-id="marsal_sdc:flex"][data-gap="very_loose"]) {
  --_space-gap: var(--flex-space-gap-veryLoose, var(--marsal-space-xl));

  gap: var(--_space-gap);
}

:where([data-component-id="marsal_sdc:flex"]) > * {
  min-inline-size: 0;
}

/* Shared side-by-side breakpoint; Table, Table Row and the Heading band mirror it. */
@media screen and (min-width: 55.25rem) {
  :where([data-component-id="marsal_sdc:flex"]:not([data-gap="none"])) {
    gap: var(--flex-space-gap-expanded, var(--_space-gap));
  }

  :where([data-component-id="marsal_sdc:flex"][data-direction="column_to_row"]) {
    flex-direction: row;
    max-inline-size: var(--flex-length-maximumInlineSize-expanded, var(--flex-length-maximumInlineSize, none));
  }
}

@media print {
  :where([data-component-id="marsal_sdc:flex"]:not([data-gap="none"])) {
    gap: var(--flex-space-gap-print, var(--flex-space-gap-expanded, var(--_space-gap)));
  }

  /* A printed row is kept on one page rather than split across two. */
  :where([data-component-id="marsal_sdc:flex"][data-direction="column_to_row"]) {
    flex-direction: row;
    max-inline-size: var(--flex-length-maximumInlineSize-print, none);
    break-inside: avoid;
  }
}