details summary {
  list-style-type: none; /* Remove default arrow */
  position: relative;
  cursor: pointer;
}

details summary::after {
  content: ""; /* Needed for the pseudo-element */
  display: inline-block;
  width: 20px; /* Adjust the width (change this to make it bigger or smaller) */
  height: 20px; /* Adjust the height (change this to make it bigger or smaller) */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 0; /* Position the icon to the right */
  top: 50%;
  transform: translateY(-50%) rotate(90deg); /* Vertically center the icon */
}

details[open] summary::after {
  transform: translateY(-50%) rotate(-90deg); /* Rotate the icon when details are open */
}