picocss/scss/components/_accordion.scss

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

@if map.get($modules, "components/accordion") {
  /**
   * Accordion (<details>)
   */
  #{$parent-selector} details {
    display: block;
    margin-block-end: var(#{$css-var-prefix}spacing);

    @if $enable-classes {
      &.hide-arrow > summary::after {
        display: none;
        content: none;
      }
    }

    &:not(.hide-arrow) > summary {
      padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
    }

    summary {
      position: relative;
      //padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
      line-height: 1rem;
      list-style-type: none;
      cursor: pointer;
      //@if $enable-transitions {
      //transition: color var(#{$css-var-prefix}transition);
      //}

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

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

      &::marker {
        display: none;
      }

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

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

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

      &:focus {
        outline: none;

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

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

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

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

    // Open
    &[open] {
      > summary {
        margin-block-end: var(#{$css-var-prefix}spacing);

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

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

  [dir="rtl"] {
    #{$parent-selector} details {
      summary {
        text-align: right;

        &::after {
          float: left;
          transform: rotate(90deg);
          background-position: left center;
        }
      }
      &[open] {
        > summary {
          &::after {
            transform: rotate(0);
          }
        }
      }
    }
  }
}