/* Panel: a surface on a hairline, at the card radius. The header and the footer are separated by
   a hairline rather than by a fill, so a page of panels stays quiet. */
.panel {
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-card);
}

.panel-header {
  border-bottom: var(--hairline) solid var(--color-line);
  padding: var(--space-3) var(--space-5);
}

.panel-body {
  padding: var(--space-5);
}

.panel-footer {
  border-top: var(--hairline) solid var(--color-line);
  padding: var(--space-3) var(--space-5);
}

/* The first and last thing inside a slot should not push the slot open. */
.panel-header > :first-child,
.panel-body > :first-child,
.panel-footer > :first-child {
  margin-top: 0;
}

.panel-header > :last-child,
.panel-body > :last-child,
.panel-footer > :last-child {
  margin-bottom: 0;
}