/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/* Base — unlayered structural CSS. Participates in normal cascade; wins over any layered CSS. */

.slds-accordion {
  position: relative;
  border-width: var(--slds-c-accordion-sizing-border, 0);
  border-style: solid;
  border-color: var(--slds-c-accordion-color-border, transparent);

  /**
   * List item for each accordion section
   */
  .slds-accordion__list-item {
    border-block-start-width: var(--slds-c-accordion-section-sizing-border, 0);
    border-block-start-style: solid;
    border-block-start-color: var(--slds-c-accordion-section-color-border, transparent);

    &:first-child {
      border-block-start-width: 0;
    }
  }

  /**
   * Summary title for each expandable panel inside of an accordion.
   * Negative margins pull the summary flush to the section edges so
   * only the heading's own block padding determines header height.
   */
  .slds-accordion__summary {
    display: flex;
    align-items: center;
    margin-block-start: calc(
      var(--slds-c-accordion-section-spacing-block-start, var(--slds-c-accordion-section-spacing-block)) * -1
    );
    margin-inline-end: calc(
      var(--slds-c-accordion-section-spacing-inline-end, var(--slds-c-accordion-section-spacing-inline)) * -1
    );
    margin-block-end: calc(
      var(--slds-c-accordion-section-spacing-block-end, var(--slds-c-accordion-section-spacing-block)) * -1
    );
    /* prettier-ignore */
    margin-inline-start: calc(
      var(--slds-c-accordion-section-spacing-inline-start, var(--slds-c-accordion-section-spacing-inline)) * -1
    );
    padding-inline-end: var(
      --slds-c-accordion-section-spacing-inline-end,
      var(--slds-c-accordion-section-spacing-inline)
    );
    padding-inline-start: var(
      --slds-c-accordion-section-spacing-inline-start,
      var(--slds-c-accordion-section-spacing-inline)
    );
    background-color: var(--slds-c-accordion-summary-color-background);
  }

  /**
   * Heading element within the accordion summary
   */
  .slds-accordion__summary-heading {
    display: flex;
    flex-grow: 1;
    min-width: 0;
    color: var(--slds-c-accordion-summary-color-foreground);
    font-size: var(--slds-c-accordion-summary-font-size);
    font-weight: var(--slds-c-accordion-summary-font-weight);
    line-height: var(--slds-c-accordion-summary-font-line-height);
  }

  /**
   * Actionable button inside of accordion summary that would toggle the visibility of each section
   */
  .slds-accordion__summary-action {
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline-start: var(
      --slds-c-accordion-summary-spacing-inline-start,
      var(--slds-c-accordion-summary-spacing-inline)
    );
    padding-inline-end: var(
      --slds-c-accordion-summary-spacing-inline-end,
      var(--slds-c-accordion-summary-spacing-inline)
    );
    padding-block-start: var(
      --slds-c-accordion-summary-spacing-block-start,
      var(--slds-c-accordion-summary-spacing-block)
    );
    padding-block-end: var(
      --slds-c-accordion-summary-spacing-block-end,
      var(--slds-c-accordion-summary-spacing-block)
    );
    border-radius: var(--slds-c-accordion-summary-radius-border);
    color: var(--slds-c-accordion-summary-color-foreground);
    font-weight: var(--slds-c-accordion-summary-font-weight);

    .slds-button__icon {
      --slds-c-button-icon-color-foreground: var(
        --slds-c-accordion-summary-icon-color-foreground,
        revert-layer
      );
    }

    &:hover,
    &:focus {
      color: var(
        --slds-c-accordion-summary-color-foreground-hover,
        var(--slds-c-accordion-summary-color-foreground)
      );
      --slds-c-button-icon-color-foreground-hover: var(
        --slds-c-accordion-summary-color-foreground-hover,
        var(--slds-c-accordion-summary-color-foreground)
      );
    }

    &:focus-visible {
      box-shadow: var(--slds-c-accordion-summary-shadow-focus);
    }

    &:active {
      box-shadow: none;
    }
  }

  /**
   * Icon inside of actionable button within an accordion section
   */
  .slds-accordion__summary-action-icon {
    flex-shrink: 0;
    transform: rotate(-90deg);

    &:dir(rtl) {
      transform: rotate(90deg);
    }
  }

  /**
   * Text of summary title for each expandable panel inside of an accordion
   */
  .slds-accordion__summary-content {
    @media (min-width: 64em) {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /**
   * Each expandable panel inside of an accordion
   */
  .slds-accordion__section {
    padding-block-start: var(
      --slds-c-accordion-section-spacing-block-start,
      var(--slds-c-accordion-section-spacing-block)
    );
    padding-inline-end: var(
      --slds-c-accordion-section-spacing-inline-end,
      var(--slds-c-accordion-section-spacing-inline)
    );
    padding-block-end: var(
      --slds-c-accordion-section-spacing-block-end,
      var(--slds-c-accordion-section-spacing-block)
    );
    padding-inline-start: var(
      --slds-c-accordion-section-spacing-inline-start,
      var(--slds-c-accordion-section-spacing-inline)
    );
    background-color: var(--slds-c-accordion-section-color-background);
  }

  /**
   * Content area for each expandable panel inside of an accordion
   */
  .slds-accordion__content {
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    height: 0;
    color: var(--slds-c-accordion-content-color-foreground);
  }

  /**
   * Toggle visibility of accordion section
   */
  .slds-is-open {
    > .slds-accordion__summary {
      margin-block-end: 0;

      .slds-accordion__summary-action-icon {
        transform: rotate(0deg);
      }
    }

    > .slds-accordion__content {
      overflow: visible;
      visibility: visible;
      opacity: 1;
      height: auto;
    }
  }
}