/**
 * @file detail_list.css
 * @component Detail List (Data)
 * @description Arranges repeated Detail components in a definition list.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * None.
 */
:where([data-component-id="marsal_sdc:detail_list"]) {
  display: grid;
  min-inline-size: 0;
  margin: 0;

  &[data-layout="inline"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--marsal-space-m);
  }

  &[data-layout="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--marsal-space-m);
  }

  &[data-layout="split"],
  &[data-layout="questions"] {
    border-block-start: var(--marsal-length-dividerAccent) solid var(--marsal-color-dividerAccent);
  }

  /* Split places labels beside values from its own width. */
  &[data-layout="split"] {
    container-type: inline-size;
    container-name: marsal-sdc-detail-list;
    /* Containment needs a width even when a Flex parent does not stretch it. */
    inline-size: 100%;

    & > :where([data-component-id="marsal_sdc:detail"]),
    & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) {
      grid-template-columns: minmax(0, 1fr);
      padding-block: var(--marsal-space-s);
    }
  }

  /* A plain wrapper Drupal adds around rendered items, such as editors' contextual links, is boxless. */
  & > :where(:not([data-component-id])) {
    display: contents;
  }
}

/* Dividers count every Detail in the list, including those inside a plain wrapper.
   The strip draws its own box dividers, so the guard keeps these rows out of it. */
:where([data-component-id="marsal_sdc:detail_list"]:not([data-layout="strip"])):is([data-dividers="between"], [data-dividers="all"]) > :where([data-component-id="marsal_sdc:detail"]),
:where([data-component-id="marsal_sdc:detail_list"]:not([data-layout="strip"])):is([data-dividers="between"], [data-dividers="all"]) > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) {
  border-block-start: 1px solid var(--marsal-color-borderSubtle);
}

:where([data-component-id="marsal_sdc:detail_list"]:not([data-layout="strip"])):is([data-dividers="between"], [data-layout="split"][data-dividers="all"]) > :where([data-component-id="marsal_sdc:detail"]):first-child,
:where([data-component-id="marsal_sdc:detail_list"]:not([data-layout="strip"])):is([data-dividers="between"], [data-layout="split"][data-dividers="all"]) > :where(:not([data-component-id])):first-child > :where([data-component-id="marsal_sdc:detail"]):first-child {
  border-block-start: 0;
}

:where([data-component-id="marsal_sdc:detail_list"]:not([data-layout="strip"]))[data-dividers="all"] > :where([data-component-id="marsal_sdc:detail"]):last-child,
:where([data-component-id="marsal_sdc:detail_list"]:not([data-layout="strip"]))[data-dividers="all"] > :where(:not([data-component-id])):last-child > :where([data-component-id="marsal_sdc:detail"]):last-child {
  border-block-end: 1px solid var(--marsal-color-borderSubtle);
}

:where([data-component-id="marsal_sdc:detail_list"]) {
  &[data-layout="questions"] {
    /* Questions and answers: each Detail is a question over its answer. */
    & > :where([data-component-id="marsal_sdc:detail"]),
    & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) {
      gap: var(--marsal-space-xs);
      padding-block: var(--marsal-space-m);
    }

    /* The accent line replaces the first divider; first and last count Details, not empty wrappers. */
    &[data-dividers] > :where([data-component-id="marsal_sdc:detail"]:nth-child(1 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))),
    &[data-dividers] > :where(:not([data-component-id]):nth-child(1 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))) > :where([data-component-id="marsal_sdc:detail"]) {
      border-block-start: 0;
    }

    /* The last answer ends the list, unless a closing divider needs space above it. */
    &:not([data-dividers="all"]) > :where([data-component-id="marsal_sdc:detail"]:nth-last-child(1 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))),
    &:not([data-dividers="all"]) > :where(:not([data-component-id]):nth-last-child(1 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))) > :where([data-component-id="marsal_sdc:detail"]) {
      padding-block-end: 0;
    }
  }

  @container marsal-sdc-detail-list (min-width: 30rem) {
    &[data-layout="split"] > :where([data-component-id="marsal_sdc:detail"]),
    &[data-layout="split"] > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) {
      grid-template-columns: 12rem minmax(0, 1fr);
      column-gap: var(--marsal-space-m);
      align-items: baseline;
    }
  }

  /* Strip dividers belong to its boxes, independently of the row-divider choice. */
  /* The strip paints its own white bar, so its text, link, border and focus roles return to the theme. */
  &[data-layout="strip"] {
    --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);

    container-type: inline-size;
    container-name: marsal-sdc-detail-list;
    /* Containment needs a width even when a Flex parent does not stretch it. */
    inline-size: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block-start: var(--marsal-length-dividerAccent) solid var(--marsal-color-dividerAccent);
    background: var(--marsal-color-surfacePrimary);
    box-shadow: var(--marsal-shadow-elevation-medium);

    & > :where([data-component-id="marsal_sdc:detail"]),
    & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--marsal-space-5xs);
      align-content: start;
      padding: var(--marsal-space-xs);
      border: 0;
    }

    /* Each sibling is a Detail or one plain wrapper containing a Detail; empty wrappers do not count. */
    & > :where([data-component-id="marsal_sdc:detail"]:nth-child(even of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))),
    & > :where(:not([data-component-id]):nth-child(even of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))) > :where([data-component-id="marsal_sdc:detail"]) {
      border-inline-start: 1px solid var(--marsal-color-borderSubtle);
    }

    & > :where([data-component-id="marsal_sdc:detail"]:nth-child(n+3 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))),
    & > :where(:not([data-component-id]):nth-child(n+3 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))) > :where([data-component-id="marsal_sdc:detail"]) {
      border-block-start: 1px solid var(--marsal-color-borderSubtle);
    }

    @container marsal-sdc-detail-list (width < 22rem) {
      & > :where([data-component-id="marsal_sdc:detail"]),
      & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) {
        grid-column: 1 / -1;
        border-inline-start: 0;
      }

      & > :where([data-component-id="marsal_sdc:detail"]:nth-child(n+2 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))),
      & > :where(:not([data-component-id]):nth-child(n+2 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))) > :where([data-component-id="marsal_sdc:detail"]) {
        border-block-start: 1px solid var(--marsal-color-borderSubtle);
      }
    }

    /* Date boxes stack below 30rem; value emphasis stacks below 22rem. */
    @container marsal-sdc-detail-list (width < 30rem) {
      &[data-emphasis="label"] > :where([data-component-id="marsal_sdc:detail"]),
      &[data-emphasis="label"] > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) {
        grid-column: 1 / -1;
        border-inline-start: 0;
      }

      &[data-emphasis="label"] > :where([data-component-id="marsal_sdc:detail"]:nth-child(n+2 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))),
      &[data-emphasis="label"] > :where(:not([data-component-id]):nth-child(n+2 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))) > :where([data-component-id="marsal_sdc:detail"]) {
        border-block-start: 1px solid var(--marsal-color-borderSubtle);
      }
    }

    /* Wide date boxes use inline dividers only, counting Details rather than empty wrappers. */
    @container marsal-sdc-detail-list (min-width: 30rem) {
      &[data-emphasis="label"] > :where([data-component-id="marsal_sdc:detail"]:nth-child(n+2 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))),
      &[data-emphasis="label"] > :where(:not([data-component-id]):nth-child(n+2 of [data-component-id="marsal_sdc:detail"], :not([data-component-id]):has(> [data-component-id="marsal_sdc:detail"]))) > :where([data-component-id="marsal_sdc:detail"]) {
        border-block-start: 0;
        border-inline-start: 1px solid var(--marsal-color-borderSubtle);
      }
    }
  }

  @media (forced-colors: active) {
    &[data-layout="split"],
    &[data-layout="questions"] {
      border-block-start-color: CanvasText;
    }
  }
}