<main>
  <div id="demo">
    <div class="accordion-wrapper">
      <details name="accordion" open>
      <summary>Item 1</summary>
      <div class="details-content-wrapper">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
      </div>
    </details>
    <details name="accordion">
      <summary>Item 2</summary>
      <div class="details-content-wrapper">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
      </div>
    </details>
    <details name="accordion">
      <summary>Item 3</summary>
      <div class="details-content-wrapper">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Dolor, aliquam. Veritatis consequatur, soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis quod dignissimos saepe quas mollitia.</p>
      </div>
    </details>
    </div>
  </div>
</main>
<footer>
  <p>Demo built after <a href="https://mui.com/material-ui/react-accordion/" target="_top">https://mui.com/material-ui/react-accordion/</a></p>
    
  </footer>

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  
  details {
    transition: height 0.5s ease;
    height: 2.5rem;
    
    &[open] {
      height: auto;
      overflow: clip; /* Clip off contents while animating */
    }
  }
}


/* Animate all properties on details. This because we change the margin, border, etc when open. */
details {
  transition: all 0.5s ease;
  background: white;
}

/* Add gap around open details */
details[open]:not(:first-child) {
  margin-top: 0.5rem;
}
details[open]:not(:last-child) {
  margin-bottom: 0.5rem;
}

/* Add border to all details, but prevent a 2px-looking one when two successive details are collapsed */
details {
  border: 1px solid #ccc;
}
details:not([open]):has(+ details:not(details[open])) {
  border-bottom-color: #fff;
}

/* Animate all on summmary */
summary {
  transition: all 0.5s ease;
  padding: 0.5em 1em;
}
[open] summary {
  padding: 1em 1em;
}

summary {
  color: #333;
  cursor: pointer;
  
  /* Roll our own marker */
  display: flex;
  justify-content: space-between;

  &::marker {
    content: "";
  }
  &::after {
    content: "";
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTguNTg2LDUuNTg2Yy0wLjc4MSwwLjc4MS0wLjc4MSwyLjA0NywwLDIuODI4TDEyLjE3MSwxMmwtMy41ODUsMy41ODZjLTAuNzgxLDAuNzgxLTAuNzgxLDIuMDQ3LDAsMi44MjggIEM4Ljk3NiwxOC44MDUsOS40ODgsMTksMTAsMTlzMS4wMjQtMC4xOTUsMS40MTQtMC41ODZMMTcuODI5LDEybC02LjQxNS02LjQxNEMxMC42MzQsNC44MDUsOS4zNjYsNC44MDUsOC41ODYsNS41ODZ6Ii8+PC9zdmc+);
    background-size: cover;
    width: 1.25rem;
    aspect-ratio: 1;
    display: block;
    transform: rotate(90deg);
    transition: transform 0.5s ease;
    transform-origin: 50% 50%;
  }
  [open] &::after {
    transform: rotate(270deg);
  }

  /* Hover state */
  &:hover {
    color: #666;
  }
}

.details-content-wrapper {
  padding: 0 1em 1em;

  /* We need margin-trim … */
  :first-child { margin-top: 0; }
  :last-child { margin-bottom: 0; }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
  }
}

@layer baselayout {
  html {
    color: #444;
    font-family: system-ui;
    line-height: 1.42;
    
    overscroll-behavior-x: none;
    overflow: auto;
  }

  main {
    max-width: 90ch;
    margin: 2rem auto;
  }

  p {
    margin-bottom: 1em;
  }
  
  #demo {
    padding: 1em;
    border: 1px solid #ccc;
    background: #f4f6f9;
  }
  footer {
    text-align: center;
    font-style: italic;
    opacity: 0.7;
  }
}