.panel {
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;

  h2, summary {
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-900);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    padding-block: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
  }
    
  /* border between children */
  > * + * {
    border-top: 1px solid var(--color-neutral-200);
    padding: calc(var(--spacing) * 4);
  }

  /* expandable panels */
  &:is(details) {
    summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      position: relative;

      &:hover {background-color: #f3f4f6 }
    }

    summary::after {
      content: '+';
      font-size: 1.25rem;
      line-height: 0;
    }
    
    &[open] summary::after { content: '−' }
  }
}