/*
 * Table styles
 */

@layer components {
  .table {
    inline-size: 100%;
    border-collapse: collapse;

    & th, & td {
      padding: var(--space-3) var(--space-4);
      text-align: start;
      border-block-end: 1px solid var(--color-border);
    }

    & th {
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      color: var(--color-ink-muted);
      background-color: var(--color-surface-muted);
    }

    & tbody tr:hover {
      background-color: var(--color-surface-muted);
    }

    & code {
      font-size: var(--text-sm);
    }
  }
}