picocss/scss/components/_accordion.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "components/accordion") {
  /**
   * Accordion (<details>)
   */

  details {
    display: block;
    margin-bottom: var(#{$✨}spacing);

    summary {
      line-height: 1rem;
      list-style-type: none;
      cursor: pointer;

      &:not([role]) {
        color: var(#{$✨}accordion-close-summary-color);
      }

      @if $enable-transitions {
        transition: color var(#{$✨}transition);
      }

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

      &::marker {
        display: none;
      }

      &::-moz-list-bullet {
        list-style-type: none;
      }

      // Marker
      &::after {
        display: block;
        width: 1rem;
        height: 1rem;
        margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
        float: right;
        transform: rotate(-90deg);
        background-image: var(#{$✨}icon-chevron);
        background-position: right center;
        background-size: 1rem auto;
        background-repeat: no-repeat;
        content: "";

        @if $enable-transitions {
          transition: transform var(#{$✨}transition);
        }
      }

      &:focus {
        outline: none;

        &:not([role]) {
          color: var(#{$✨}accordion-active-summary-color);
        }
      }

      &:focus-visible {
        &:not([role]) {
          outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus);
          outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5);
          color: var(#{$✨}primary);
        }
      }

      // Type button
      &[role="button"] {
        width: 100%;
        text-align: left;

        // Marker
        &::after {
          height: calc(1rem * var(#{$✨}line-height, 1.5));
        }
      }
    }

    // Open
    &[open] {
      > summary {
        margin-bottom: var(#{$✨}spacing);

        &:not([role]) {
          &:not(:focus) {
            color: var(#{$✨}accordion-open-summary-color);
          }
        }

        &::after {
          transform: rotate(0);
        }
      }
    }
  }

  [dir="rtl"] {
    details {
      summary {
        text-align: right;

        &::after {
          float: left;
          background-position: left center;
        }
      }
    }
  }
}