details {
  overflow: hidden;
}

details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

details::details-content {
  block-size: 0;
  transition:
    block-size 0.3s ease,
    content-visibility 0.3s ease;
  transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

details > summary svg {
  transition: transform 0.1s ease;
}

details[open] > summary svg {
  transform: rotate(90deg);
}