/**
 * @file accordion_item.css
 * @component Accordion Item (Internal)
 * @description Native disclosures with wrapping owned text.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_fontFamily-question, --_fontSize-question, --_fontWeight-question,
 * --_lineHeight-question, --_letterSpacing-question: Question typography.
 * --_color-summaryForeground, --_color-summaryBackground: Summary colors.
 * --_color-panelBackground: Panel surface.
 * --_color-openEdge, --_length-openEdge: Open-state edge.
 * --_length-indicatorBorder: Indicator outline.
 * --_length-summaryBorder: Boxed summary outline.
 * --_length-keyIndicator: Compact list arrow size and panel indent.
 */
:where([data-component-id="marsal_sdc:accordion_item"]) {
  --_fontFamily-question: var(--marsal-fontFamily-label-standard);
  --_fontSize-question: var(--marsal-fontSize-label-standard);
  --_fontWeight-question: var(--marsal-fontWeight-label-standard);
  --_lineHeight-question: var(--marsal-lineHeight-label-standard);
  --_letterSpacing-question: var(--marsal-letterSpacing-label-standard);
  --_color-summaryForeground: var(--marsal-color-textStrong);
  --_color-summaryBackground: var(--marsal-color-surfaceSubtle);
  --_color-panelBackground: transparent;
  --_color-openEdge: transparent;
  --_length-openEdge: 0px;
  --_length-indicatorBorder: 0px;
  --_length-summaryBorder: 0px;
  --_length-keyIndicator: 0.85rem;

  position: relative;
  container: marsal-sdc-accordion-item / inline-size;
  min-inline-size: 0;
  border-block-end: 1px solid var(--marsal-color-borderSubtle);
  color: var(--marsal-color-textPrimary);

  & > .marsal-accordion-item__summary {
    display: block;
    box-sizing: border-box;
    min-block-size: max(44px, 2.75rem);
    padding: var(--marsal-space-xs) var(--marsal-space-s);
    border: var(--_length-summaryBorder) solid var(--marsal-color-borderControl);
    color: var(--_color-summaryForeground);
    background: var(--_color-summaryBackground);
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }

    & > .marsal-accordion-item__heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--marsal-space-xs);
      align-items: start;
      margin: 0;
      color: inherit;
      font-family: var(--_fontFamily-question);
      font-size: var(--_fontSize-question);
      font-weight: var(--_fontWeight-question);
      line-height: var(--_lineHeight-question);
      letter-spacing: var(--_letterSpacing-question);
      overflow-wrap: anywhere;

      & > .marsal-accordion-item__text {
        display: contents;
      }

      & > .marsal-accordion-item__text > .marsal-accordion-item__label {
        grid-column: 1;
        min-inline-size: 0;
      }

      & > .marsal-accordion-item__tag {
        grid-column: 1;
        justify-self: start;
        min-inline-size: 0;
        max-inline-size: 100%;
        box-sizing: border-box;
        margin-block-start: var(--marsal-space-2xs);
        padding: var(--marsal-space-6xs) var(--marsal-space-3xs);
        border-radius: 0.125rem;
        color: var(--marsal-color-textOnAccent);
        background: var(--marsal-color-surfaceAccent);
        font-family: var(--marsal-fontFamily-label-small);
        font-size: var(--marsal-fontSize-label-small);
        font-weight: var(--marsal-fontWeight-label-small);
        line-height: var(--marsal-lineHeight-label-small);
        letter-spacing: var(--marsal-letterSpacing-label-small);
      }

      & > .marsal-accordion-item__preview {
        grid-column: 1;
        min-inline-size: 0;
        margin-block-start: var(--marsal-space-2xs);
        color: var(--marsal-color-textMuted);
        font-family: var(--marsal-fontFamily-body-small);
        font-size: var(--marsal-fontSize-body-small);
        font-weight: var(--marsal-fontWeight-body-small);
        line-height: var(--marsal-lineHeight-body-small);
        letter-spacing: var(--marsal-letterSpacing-body-small);
      }

      & > .marsal-accordion-item__indicator {
        display: grid;
        grid-column: 2;
        grid-row: 1 / span 3;
        place-items: center;
        box-sizing: border-box;
        inline-size: 2rem;
        block-size: 2rem;
        border: var(--_length-indicatorBorder) solid currentColor;
        border-radius: 50%;
        font-family: var(--marsal-fontFamily-title-standard);
        font-size: var(--marsal-fontSize-title-standard);
        font-weight: var(--marsal-fontWeight-title-standard);
        line-height: var(--marsal-lineHeight-title-standard);
        letter-spacing: var(--marsal-letterSpacing-title-standard);
      }

      & > .marsal-accordion-item__indicator::before {
        content: "+";
      }
    }

    &:focus-visible {
      outline: 3px solid var(--marsal-color-focusRing);
      outline-offset: 3px;
      box-shadow: 0 0 0 2px var(--marsal-color-focusRingContrast);
    }
  }

  &[open]
    > .marsal-accordion-item__summary {
    & > .marsal-accordion-item__heading > .marsal-accordion-item__indicator::before {
      content: "−";
    }

    &::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      border-inline-start: var(--_length-openEdge) solid var(--_color-openEdge);
      pointer-events: none;
    }
  }

  & > .marsal-accordion-item__panel {
    padding: var(--marsal-space-s);
    background: var(--_color-panelBackground);

    & a:any-link:not([data-component-id], :where(.marsal-accordion-item__panel) [data-component-id] *) {
      text-decoration-line: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;

      &:is(:hover, :focus) {
        text-decoration-thickness: 2px;
      }

      &:focus-visible {
        border-radius: 2px;
        outline: 3px solid var(--marsal-color-focusRing);
        outline-offset: 3px;
        box-shadow: 0 0 0 2px var(--marsal-color-focusRingContrast);
      }
    }
  }

  & > .marsal-accordion-item__summary > .marsal-accordion-item__heading {
    @container marsal-sdc-accordion-item (min-width: 38rem) {
      grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;

      & > .marsal-accordion-item__tag {
        grid-column: 2;
        grid-row: 1;
        max-inline-size: 18rem;
        margin-block-start: 0;
      }

      & > .marsal-accordion-item__indicator {
        grid-column: 3;
      }
    }

    /* A Value gets its own track between the label and the indicator. */
    &:has(> .marsal-accordion-item__text > .marsal-accordion-item__value) {
      grid-template-columns: minmax(0, 1fr) auto auto;

      & > .marsal-accordion-item__text > .marsal-accordion-item__label {
        align-self: first baseline;
      }

      & > .marsal-accordion-item__tag {
        grid-row: 2;
      }

      & > .marsal-accordion-item__indicator {
        grid-column: 3;
        grid-row: 1 / span 4;
      }
    }

    & > .marsal-accordion-item__text > .marsal-accordion-item__value {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: first baseline;
      min-inline-size: 0;
      color: var(--marsal-color-textStrong);
      font-family: var(--marsal-fontFamily-body-standard);
      font-size: var(--marsal-fontSize-body-standard);
      font-weight: var(--marsal-fontWeight-emphasis);
      line-height: var(--marsal-lineHeight-body-standard);
      letter-spacing: var(--marsal-letterSpacing-body-standard);
      white-space: nowrap;
    }

    & > .marsal-accordion-item__text > .marsal-accordion-item__separator {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    @container marsal-sdc-accordion-item (width < 38rem) {
      &:has(> .marsal-accordion-item__text > .marsal-accordion-item__value) {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      & > .marsal-accordion-item__text > .marsal-accordion-item__value {
        grid-column: 1;
        grid-row: 2;
        white-space: normal;
      }

      &:has(> .marsal-accordion-item__text > .marsal-accordion-item__value) > .marsal-accordion-item__tag {
        grid-row: auto;
      }

      &:has(> .marsal-accordion-item__text > .marsal-accordion-item__value) > .marsal-accordion-item__indicator {
        grid-column: 2;
      }
    }
  }

  @media (forced-colors: active) {
    & > .marsal-accordion-item__summary > .marsal-accordion-item__heading > .marsal-accordion-item__indicator {
      border-color: ButtonText;
      color: ButtonText;
    }

    & > .marsal-accordion-item__summary > .marsal-accordion-item__heading > .marsal-accordion-item__tag {
      border: 1px solid CanvasText;
      color: CanvasText;
      background: Canvas;
    }

    &[open]
      > .marsal-accordion-item__summary::before {
      border-inline-start-color: Highlight;
    }

    & > .marsal-accordion-item__summary:focus-visible {
      outline-color: Highlight;
    }
  }
}

/* @todo WORKAROUND: behavioursoe base.css:440-458 forces link color; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:accordion_item"]) > .marsal-accordion-item__panel a:any-link:not([data-component-id], :where(.marsal-accordion-item__panel) [data-component-id] *) {
  color: var(--marsal-color-link);
}

/*
 * Accordion's Numbered steps and Compact list appearances restyle this
 * component's parts. Each rule starts at the Accordion root and passes
 * through its items, so it reaches only that Accordion's direct items.
 */
:where([data-component-id="marsal_sdc:accordion"])[data-component-variant="steps"] {
  & > .marsal-accordion__items > .marsal-accordion-item__entry > :where([data-component-id="marsal_sdc:accordion_item"]) > .marsal-accordion-item__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--marsal-space-xs);
    align-items: baseline;
    min-block-size: 3rem;
    padding: var(--marsal-space-s) 0;
    font-family: var(--marsal-fontFamily-label-standard);
    font-size: var(--marsal-fontSize-label-standard);
    font-weight: var(--marsal-fontWeight-label-standard);
    line-height: var(--marsal-lineHeight-label-standard);
    letter-spacing: var(--marsal-letterSpacing-label-standard);

    /* Replace the open-edge pseudo-element only in this appearance. */
    &::before {
      content: none;
      position: static;
      border: 0;
    }
  }

  &[data-show-numbers="true"]
    > .marsal-accordion__items > .marsal-accordion-item__entry > :where([data-component-id="marsal_sdc:accordion_item"]) > .marsal-accordion-item__summary {
    grid-template-columns: minmax(2ch, max-content) minmax(0, 1fr) auto;

    &::before {
      content: counter(marsal-accordion-step, decimal-leading-zero) / "";
      color: var(--marsal-color-textMuted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
  }

  & > .marsal-accordion__items > .marsal-accordion-item__entry > :where([data-component-id="marsal_sdc:accordion_item"]) {
    & > .marsal-accordion-item__summary::after {
      content: "+" / "";
      margin-inline-start: auto;
    }

    &[open] > .marsal-accordion-item__summary::after {
      content: "−" / "";
    }

    & > .marsal-accordion-item__summary > .marsal-accordion-item__heading {
      min-inline-size: 0;
      grid-template-columns: minmax(0, 1fr);
      align-items: baseline;

      & > .marsal-accordion-item__indicator {
        display: none;
      }

      & > .marsal-accordion-item__tag,
      & > .marsal-accordion-item__text > .marsal-accordion-item__value {
        grid-column: 1;
        grid-row: auto;
        white-space: normal;
      }
    }

    & > .marsal-accordion-item__panel {
      padding: 0 0 var(--marsal-space-s);
      font-family: var(--marsal-fontFamily-body-small);
      font-size: var(--marsal-fontSize-body-small);
      font-weight: var(--marsal-fontWeight-body-small);
      line-height: var(--marsal-lineHeight-body-small);
      letter-spacing: var(--marsal-letterSpacing-body-small);
    }
  }
}

:where([data-component-id="marsal_sdc:accordion"])[data-component-variant="key_list"]
  > .marsal-accordion__items > .marsal-accordion-item__entry > :where([data-component-id="marsal_sdc:accordion_item"]) {
  & > .marsal-accordion-item__summary {
    display: grid;
    min-block-size: 0;
    padding: 0;
    padding-block-end: var(--marsal-space-2xs);
    border-block-end: 1px solid var(--marsal-color-borderSubtle);

    & > .marsal-accordion-item__heading {
      grid-template-columns: auto minmax(0, 1fr) auto;
      column-gap: var(--marsal-space-3xs);
      align-items: baseline;

      & > .marsal-accordion-item__text {
        display: contents;
      }

      & > .marsal-accordion-item__text > .marsal-accordion-item__label {
        grid-column: 2;
        grid-row: 1;
      }

      & > .marsal-accordion-item__text > .marsal-accordion-item__value {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        text-align: end;
        color: var(--marsal-color-textStrong);
        font-family: var(--marsal-fontFamily-label-small);
        font-size: var(--marsal-fontSize-label-small);
        font-weight: var(--marsal-fontWeight-label-small);
        line-height: var(--marsal-lineHeight-label-small);
        letter-spacing: var(--marsal-letterSpacing-label-small);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      & > :is(.marsal-accordion-item__tag, .marsal-accordion-item__preview) {
        display: none;
      }

      & > .marsal-accordion-item__indicator {
        position: relative;
        display: inline-block;
        grid-column: 1;
        grid-row: 1;
        inline-size: var(--_length-keyIndicator);
        block-size: var(--_length-keyIndicator);
        border: 0;
        border-radius: 0;
      }

      & > .marsal-accordion-item__indicator::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        box-sizing: border-box;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
  }

  &[open] > .marsal-accordion-item__summary > .marsal-accordion-item__heading > .marsal-accordion-item__indicator::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  & > .marsal-accordion-item__panel {
    padding: 0 0 var(--marsal-space-2xs) calc(var(--_length-keyIndicator) + var(--marsal-space-3xs));
    font-family: var(--marsal-fontFamily-body-small);
    font-size: var(--marsal-fontSize-body-small);
    font-weight: var(--marsal-fontWeight-body-small);
    line-height: var(--marsal-lineHeight-body-small);
    letter-spacing: var(--marsal-letterSpacing-body-small);

    /* Course lists are indented under the text that introduces them, with brand markers. */
    & :where(ul, ol) {
      display: grid;
      gap: var(--marsal-space-xs);
      margin-block: var(--marsal-space-2xs) 0;
      margin-inline: 0;
      padding-inline-start: var(--marsal-space-s);
      list-style-type: disc;
    }

    & :where(ol) {
      list-style-type: decimal;
    }

    & :where(li)::marker {
      color: var(--marsal-color-textBrand);
    }
  }
}