<details name="accordion">
  <summary>Here is a summary</summary>
  <div class="content-wrapper">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.
  </div>
</details>
<details name="accordion">
  <summary>Here is a second thing</summary>
  <div class="content-wrapper">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.

  </div>
</details>
<details name="accordion">
  <summary>Here is another summary</summary>
  <div class="content-wrapper">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.
  </div>
</details>

@import url("https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Lilita+One&display=swap");

/* I could nest this more, but I wanted to split it up a bit for readability in te demo, first default styling of details, the transition is in the last layer but shown in top, so you can get the gist of this demo fast */

@layer presentation, details-base-styles, animated-content;

@layer presentation {
  :root {
    --eggshell: #e6e3d4;
    --ash-grey: #b3cbb9;
    --pearl: #ddd8b8;
    --ultra-violet: #6a66a3;
    --eminence: #542e71;
    --padding: 1rem;
    /*     Allows us to animate to height: auto */
    interpolate-size: allow-keywords;
  }
}

@layer animated-content {
  @supports selector(::details-content) {
    ::details-content {
      height: 0;
      transition: padding-block 0.3s, height 0.3s ease,
        content-visibility 0.3s ease allow-discrete;
      overflow: clip;

      /*  Content-visibility is key here, as this is a discrete property we can animate to show the details-content pseudo element. Remember that we allow-discrete properties to transition and that this should come last in the transition shorthand. */
    }
  }
  details[open] {
    summary {
      border-bottom: 1px dashed var(--ultra-violet);
      &::after {
        transform: rotate(-180deg);
      }
    }
    @supports selector(::details-content) {
      &::details-content {
        height: auto;
      }
    }
  }
}

@layer details-base-styles {
  details {
    background: var(--eggshell);
    border: 1px solid var(--ultra-violet);
    &:has(+ details) {
      border-bottom-color: transparent;
    }
    &:first-child {
      border-radius: 5px 5px 0 0;
    }
    &:last-child {
      border-radius: 0 0 5px 5px;
    }
  }
  summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--padding);
    font-family: "Lilita One", sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.03em;
    color: var(--eminence);
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    &::marker {
      content: "";
    }
    &::after {
      width: 1.5rem;
      height: 1.5rem;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
      background: var(--eminence);
      content: "";
      transition: transform 0.3s ease-out;
    }
  }
  .content-wrapper {
    padding: var(--padding);
  }
}

@layer presentation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 5vh 5vw;
    min-height: 100dvh;
    font-family: "Faculty Glyphic", sans-serif;
    line-height: 1.6;
    background-image: linear-gradient(180deg, var(--pearl), var(--ash-grey));
  }
}