summary {
  anchor-name: --summary;
}

summary::marker {
  content: "";
}

summary::before, summary::after {
  content: "";
  border-block-start: 1.25px solid rgba(0,0,0,.4);
  height: 0;
  width: 10px;
  inset-block-start: 50%;
  inset-inline-end: .875rem;
  position: absolute;
  position-anchor: --summary;
  position-area: top end;
}
  
summary::after {
  transform: rotate(90deg);
  transform-origin: 50%;
}

details {
  cursor:pointer
}

/* Excluimos Safari por no reconocer ::details-content, más info en 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::after {
  transform: rotate(0deg);
}


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

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

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