/**
 * @file accordion.css
 * @component Accordion (Interaction)
 * @description Boxed, ruled, numbered and compact native disclosures.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * Helper aliases, and the Steps and Compact list rules for Accordion Item's
 * parts, are declared in accordion_item.css.
 */
:where([data-component-id="marsal_sdc:accordion"]) {
  min-inline-size: 0;
  color: var(--marsal-color-textPrimary);

  & > .marsal-accordion__items {
    display: grid;
    gap: var(--marsal-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;

    & > .marsal-accordion-item__entry {
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  &[data-component-variant="boxed"]
    > .marsal-accordion__items > .marsal-accordion-item__entry > :where([data-component-id="marsal_sdc:accordion_item"]) {
    --_color-summaryForeground: var(--marsal-color-textControl);
    --_color-summaryBackground: var(--marsal-color-surfaceControl);
    --_length-summaryBorder: 1px;

    border-block-end: 0;
  }

  &[data-component-variant="ruled"] > .marsal-accordion__items {
    gap: 0;
    border-block-start: 1px solid var(--marsal-color-borderSubtle);

    /* Configure only direct helpers, never components projected into their panels. */
    & > .marsal-accordion-item__entry > :where([data-component-id="marsal_sdc:accordion_item"]) {
      --_fontFamily-question: var(--marsal-fontFamily-title-standard);
      --_fontSize-question: var(--marsal-fontSize-title-standard);
      --_fontWeight-question: var(--marsal-fontWeight-title-standard);
      --_lineHeight-question: var(--marsal-lineHeight-title-standard);
      --_letterSpacing-question: var(--marsal-letterSpacing-title-standard);
      --_color-summaryForeground: var(--marsal-color-textBrand);
      --_color-summaryBackground: transparent;
      --_color-panelBackground: var(--marsal-color-surfaceSubtle);
      --_color-openEdge: var(--marsal-color-borderAccent);
      --_length-openEdge: var(--marsal-length-dividerAccent);
      --_length-indicatorBorder: 1px;

      /*
       * The ruled panel paints the neutral subtle surface, so it owns its role
       * boundary on any band. The item root resolved its text colour against the
       * band, so the panel reads textPrimary again.
       */
      & > .marsal-accordion-item__panel {
        --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);

        color: var(--marsal-color-textPrimary);
      }
    }
  }

  &[data-component-variant="steps"] > .marsal-accordion__items {
    gap: 0;
    counter-reset: marsal-accordion-step;

    & > .marsal-accordion-item__entry {
      counter-increment: marsal-accordion-step;

      & + .marsal-accordion-item__entry {
        border-block-start: 1px solid var(--marsal-color-borderSubtle);
      }

      & > :where([data-component-id="marsal_sdc:accordion_item"]) {
        --_color-summaryForeground: var(--marsal-color-textBrand);
        --_color-summaryBackground: transparent;

        border-block-end: 0;
      }
    }
  }

  /* Compact list: one column of small-type rows. */
  &[data-component-variant="key_list"] > .marsal-accordion__items {
    grid-template-columns: minmax(0, 1fr);

    & > .marsal-accordion-item__entry > :where([data-component-id="marsal_sdc:accordion_item"]) {
      --_fontFamily-question: var(--marsal-fontFamily-body-small);
      --_fontSize-question: var(--marsal-fontSize-body-small);
      --_fontWeight-question: var(--marsal-fontWeight-body-small);
      --_lineHeight-question: var(--marsal-lineHeight-body-small);
      --_letterSpacing-question: var(--marsal-letterSpacing-body-small);
      --_color-summaryForeground: var(--marsal-color-textPrimary);
      --_color-summaryBackground: transparent;

      border-block-end: 0;
    }
  }

  @media (forced-colors: active) {
    &[data-component-variant="steps"]
      > .marsal-accordion__items > .marsal-accordion-item__entry {
      border-color: CanvasText;
    }
  }
}