.accordion > summary {
  list-style: none;
}
.accordion > summary::-webkit-details-marker {
  display: none;
}
.accordion > summary > :is(h2, h3, h4, h5, h6) {
  margin: 0;
  font: inherit;
}
.accordion[open] > summary .accordion--icon {
  transform: rotate(180deg);
}

/* Animate native disclosure without measuring hidden tab content. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .accordion {
    interpolate-size: allow-keywords;
  }
  .accordion::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 500ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 500ms ease,
      content-visibility 500ms allow-discrete;
  }
  .accordion[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .accordion::details-content,
  .accordion .accordion--icon {
    transition: none;
  }
}