@layer components {
  /* Generic panel container */
  .panel {
    --panel-bg: var(--color-canvas);
    --panel-padding: var(--block-space) var(--inline-space);

    background-color: var(--panel-bg);
    padding: var(--panel-padding);
  }

  .panel--surface {
    --panel-bg: var(--color-surface);
    border-radius: var(--radius);
  }

  .panel--bordered {
    border: var(--border);
    border-radius: var(--radius);
  }

  /* Panel header */
  .panel__header {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    margin-block-end: var(--block-space);
  }

  .panel__title {
    font-size: var(--text-medium);
    font-weight: 600;
  }

  /* Empty state */
  .empty-state {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    justify-content: center;
    padding: var(--block-space-triple) var(--inline-space);
    text-align: center;
  }

  .empty-state__icon {
    font-size: var(--text-xl);
    opacity: 0.5;
  }

  .empty-state__heading {
    font-size: var(--text-medium);
    font-weight: 600;
    color: var(--color-ink-secondary);
  }

  .empty-state__description {
    font-size: var(--text-small);
    max-inline-size: 24rem;
  }
}