.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--fx-m-32);
  width: 100%;

  details {
    padding: var(--fx-p-20) 0;
    border-bottom: 1px solid var(--border-subtle);
    min-width: 200px;

    summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--fx-p-8);

      svg {
        color: var(--icon-dark);
        transform: rotate(180deg);
        transition: transform 0.2s ease;
      }
    }

    .content {
      margin-top: var(--fx-p-12);
    }

    &[open] {
      summary {
        svg {
          transform: rotate(0deg);
        }
      }
    }

    &:hover {
      background-color: var(--bg-surface);
    }
  }

  @media (width > 500px) {
    details {
      padding: var(--fx-p-20) var(--fx-p-16);

      summary {
        gap: var(--fx-p-24);
      }
    }
  }

  /* Exception to how we usually try to use media queries for larger */
  /* viewports. Force text to be the same size as the label on mobile. */
  /* If components get weird, we can exclude things with :not(). */
  @media (width <= 500px) {
    details .content * {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: -0.15px;
    }
  }
}

/* animate the detail element on open/close */
/* Only apply ::details-content animation in browsers that support it */
/* Combine checks to ensure full support before applying animations */
/* Not gonna lie, Claude helped out here so... enter at your own risk. But it works! */
@supports selector(::details-content) and
  (interpolate-size: allow-keywords) and
  (content-visibility: auto) {
  :root {
    interpolate-size: allow-keywords;
  }

  .accordion ::details-content {
    transition:
      height 0.3s ease,
      content-visibility 0.3s ease allow-discrete;
    height: 0;
    overflow: clip;
  }

  .accordion [open]::details-content {
    height: auto;
  }
}