summary {
  anchor-name: --summary;
}

summary::marker {
  content: "";
}

.summary-icon {
  transform-origin: center;
  transition: all .5s;
  transform: rotate(0)
}

details {
  cursor:pointer
}

/* Exclude Safari because doesn't support ::details-content, more info: https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/ */
@supports (contain: paint) and (not (-webkit-hyphens: none)) {
  details::details-content {
    height: 0;
    transition: height .5s, content-visibility .5s;
    transition-behavior: allow-discrete;
  }
}

details[open] .summary-icon {
  transform: rotate(180deg);
}


@supports (interpolate-size: allow-keywords) {

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

  :root {
    interpolate-size: allow-keywords;
  }
  
}

.collapsible-content ul {
  list-style: disc outside;
  margin-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.collapsible-content {
  font-size: 16.8px;
  font-weight: var(--font-regular);
  line-height: 1.45;
  color:hsl(var(--color-pebble));
}

.summary-icon {
  color:hsl(var(--brand-darker));
}