details {
  --panel-padding: var(--spacing-200, 16px);
  --icon-diameter: var(--spacing-450, 40px);
  border: 1px solid var(--grey-400, #dedede);
  border-radius: var(--spacing-50, 4px);
  text-wrap: pretty;

  &:has(+ details) {
    border-bottom: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  + details {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  summary {
    position: relative;
    padding: var(--panel-padding);
    padding-right: calc((var(--panel-padding) * 2) + var(--icon-diameter));
    font: var(--h3-font, normal normal 600 var(--font-size-500, 20px) / var(--line-height-600, 26px) Arial);
    text-wrap: balance;

    &::marker,
    &::-webkit-details-marker {
      display: none;
    }

    &:hover {
      background: var(--brand-primary-100, #e0e2f0);
      cursor: pointer;

      &::after {
        background-color: var(--white, #fff);
      }
    }

    &::after {
      display: block;
      position: absolute;
      top: 0;
      right: var(--panel-padding);
      bottom: 0;
      aspect-ratio: 1 / 1;
      width: var(--icon-diameter);
      height: var(--icon-diameter);
      margin: auto;
      transform: rotateY(180deg);
      transform-origin: center;
      border-radius: 1000px;
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16.5002L4.5 9.00019L5.55 7.9502L12 14.4002L18.45 7.9502L19.5 9.00019L12 16.5002Z' fill='%23252525'/%3E%3C/svg%3E");
      background-position: center;
      background-size: calc(var(--icon-diameter) / 1.7);
      background-repeat: no-repeat;
      content: "";
      transition: transform 0.5s ease;
    }
  }

  &:has(summary:focus-visible) {
    outline: 2px dashed var(--brand-primary-500, #001080);

    .item-page & summary:focus-visible {
      outline-style: none;
    }
  }

  &[open] summary::after {
    transform: rotateY(180deg) rotateZ(180deg);
  }

  .answer {
    padding: var(--panel-padding);
    font: var(--body-font, normal normal 400 var(--font-size-300, 16px) / var(--line-height-400, 22px) Arial);
  }
}

/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

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

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