.details {
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  .details:not([data-motion-reduced='true'])::details-content {
    height: 0px;
    overflow-y: clip;
    transition:
      height var(--grapes-transition-duration-long)
        var(--grapes-transition-timing-function),
      content-visibility var(--grapes-transition-duration-long) allow-discrete;
  }

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

.summary {
  outline: none;
  cursor: pointer;

  &:focus-visible {
    background-color: var(--grapes-color-background-primary-hover);
  }
}

.summary::marker {
  content: none;
}

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