semantic-styles/package/elements/details.css

"Responsive, Themed, UI Design System."

details {
  background-color: var(--bg-2);
  width: 100%;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: var(--thickness) solid var(--accent-1);
}

details:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-color: var(--bg-2);
  box-shadow: var(--elevation-1);
}

details:hover {
  box-shadow: var(--elevation-3);
}

details[open] {
  box-shadow: var(--elevation-3);
}

details > * {
  padding-top: 0;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

details > p:first-of-type {
  margin-block-start: 0;
}