@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;

@layer odd.components {
  .odd-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: var(--odd-border-width-default) solid var(--odd-color-border-default);
    border-radius: var(--odd-card-radius);
    background: var(--odd-color-surface-default);
    overflow: hidden;
    color: var(--odd-color-text-primary);
    font-family: var(--odd-type-ui-family);
    font-size: var(--odd-type-ui-size);
    font-weight: var(--odd-type-ui-weight);
    line-height: var(--odd-type-ui-line-height);
  }
  .odd-table :is(th, td) {
    padding: var(--odd-space-sm) var(--odd-space-md);
    text-align: start;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }
  .odd-table thead th {
    background: var(--odd-color-surface-sunken);
    color: var(--odd-color-text-secondary);
    font-weight: var(--odd-font-weight-medium);
  }
  .odd-table th[aria-sort]:not([aria-sort='none']) {
    color: var(--odd-color-text-primary);
  }
  .odd-table tbody tr + tr > * {
    border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
  }
  .odd-table tbody tr:has(input[type='checkbox']:checked) {
    background: var(--odd-color-selection-background);
    color: var(--odd-color-selection-foreground);
  }
  .odd-table caption {
    padding-block: var(--odd-space-xs);
    text-align: start;
  }
}