pico/scss/components/_accordion.scss

/**
 * Accordion (<details>)
 * Inspiration: https://codepen.io/koca/pen/RyeLLV
 */

details {
  display: block;
  margin-bottom: var(--spacing-typography);
  padding-bottom: calc(var(--spacing-typography) / 2);
  border-bottom: 1px solid var(--muted-border);

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

    // Reset marker
    &::-webkit-details-marker {
      display: none;
    }
    &::marker {
      display: none;
    }
    &::-moz-list-bullet {
      list-style-type: none;
    }

    // Marker
    &::after {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      float: right;
      transform: rotate(-90deg);
      background-image: var(--icon-chevron);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1rem auto;
      content: '';

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

    &:focus {
      outline: none;
    }

    ~ * {
      margin-top: calc(var(--spacing-typography) / 2);

      ~ * {
        margin-top: 0;
      }
    }
  }

  // Open
  &[open] {

    > summary {
      margin-bottom: calc(var(--spacing-typography) / 4);
      color: var(--muted-text);

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