.chevron {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  list-style: none;
}

.chevron::-webkit-details-marker {
  display: none;
}

.chevron::after {
  content: "+";
  flex: none;
  color: rgb(var(--accent-text));
  font-size: 1.25rem;
  font-weight: 200;
  line-height: 1;
}

details[open] > .chevron::after {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .chevron::after {
    transition: transform 300ms;
  }
}