<main>
  <h1>Exclusive Accordion</h1>
  <div>
    <h2>Multiple <code>&lt;details&gt;</code> without a <code>name</code></h2>

    <details open>
      <summary>Summary 1</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
    </details>

    <details>
      <summary>Summary 2</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
    </details>

    <details>
      <summary>Summary 3</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
    </details>
  </div>

  <div>
    <h2>Multiple <code>&lt;details&gt;</code> with a <code>name</code></h2>

    <details name="my-accordion">
      <summary>Summary 1</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
    </details>

    <details name="my-accordion" open>
      <summary>Summary 2</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
    </details>

    <details name="my-accordion">
      <summary>Summary 3</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
    </details>
  </div>
</main>

<footer>
  <p>This demo is part of <a href="https://goo.gle/css-wrapped-2023" target="_top">#CSSWrapped2023</a></p>
</footer>

details {
  --border-color: #6300ff;
  border: 0.25em solid var(--border-color);
  overflow: hidden;
  margin: 0;

  > summary {
    background: #ccc;
    padding: 0.5em;
    border-bottom: 0.25em solid var(--border-color);
    cursor: pointer;

    transition: background 0.25s ease, color 0.25s ease;

    &:hover {
      background: #b4b4b4;
    }
  }

  &[open] {
    border-bottom: 0.25em solid var(--border-color);

    > summary {
      background: #b4b4b4;
    }
  }

  > *:not(summary) {
    padding: 1em;
  }
}

details:has(+ details) {
  border-bottom: none;
}
details + details {
  border-top: none;
}

:not(details) + details,
details:first-child {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
details:not(details:has(+ details)) {
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;

  &:not([open]) summary {
    border-bottom: 0;
  }
}

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

  * {
    margin: 0;
    padding: 0;
  }

  ul[class] {
    list-style: none;
  }

  label {
    cursor: pointer;
    max-width: max-content;
    user-select: none;
  }
}

@layer baselayout {
  html {
    margin: auto;
    line-height: 1.5;
    font-size: 1.25em;
    font-family: "Syne", sans-serif;
    min-height: 100%;
    background: white;
  }

  body {
    width: 100%;
    max-width: 120ch;
    margin: 0 auto;
    min-height: 100dvh;
    padding: 2em;
  }

  footer {
    text-align: center;
    font-style: italic;
    margin-top: 2rem;
  }

  h1,
  h2,
  summary {
    font-family: "Anybody", sans-serif;

    text-decoration: underline;
    text-decoration-color: hsl(156deg 100% 50% / 50%);
    text-decoration-thickness: 0.2rem;
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
  }

  h2 {
    margin: 2em 0 0.5em 0;
    text-wrap: balance;
  }

  a {
    color: inherit;
  }
}

@layer utilities {
  .float-right {
    float: right;
    margin-left: 0.5em;
  }
  .float-left {
    float: left;
    margin-right: 0.5em;
  }
  *:has(> .float-right, > .float-left) {
    display: flow-root;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

// Exclusive accordion polyfill
//
// When a <details> element with a [name] opens, this code finds
// the other open ones with that [name] and closes them manually.
document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails == $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});