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
}

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;
  }
  
}