modeling-app/src/components/CollapsiblePanel.module.css

.panel {
  @apply relative z-0;
  @apply bg-chalkboard-10/70 backdrop-blur-sm;
}

:global(.dark) .panel {
  @apply bg-chalkboard-110/50 backdrop-blur-0;
}

.header {
  @apply sticky top-0 z-10 cursor-pointer;
  @apply flex items-center justify-between gap-2 w-full p-2;
  @apply font-mono text-xs font-bold select-none text-chalkboard-90;
  @apply bg-chalkboard-20;
}

.header:not(:last-of-type) {
  @apply border-b;
}

:global(.dark) .header {
  @apply bg-chalkboard-110 border-b-chalkboard-90 text-chalkboard-30;
}

:global(.dark) .header:not(:last-of-type) {
  @apply border-b-2;
}

.panel:first-of-type .header {
  @apply rounded-t;
}

.panel:last-of-type .header {
  @apply rounded-b;
}

.panel[open] .header {
  @apply rounded-t rounded-b-none;
}

.panel[open] {
  @apply flex-grow max-h-full h-48 my-1 rounded;
}

.panel[open] + .panel[open],
.panel[open]:first-of-type {
  @apply mt-0;
}

.panel[open]:last-of-type {
  @apply mb-0;
}