{"version":3,"file":"table-base.css.cjs","names":[],"sources":["../../../src/styles/mixins/table-base.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Table Base Mixin\n *\n * Shared structural foundation for table-like components (`ore-table`, `ore-datagrid`).\n * Covers only the `:host` shell, `.scroll-container`, and the bare `table` element.\n * Each consumer component owns all cell, row, head, and footer styles itself.\n *\n * Token naming:\n *  - `--_accent`   Primary interactive accent (sort icons, selection borders, focus rings).\n *                  Defaults to `--color-primary-focus`. Override via `--{prefix}-accent`.\n *\n * @param prefix  CSS custom-property namespace, e.g. `'table'` or `'datagrid'`\n *\n * @example\n * ```ts\n * // ore-table\n * styles: [tableBaseMixin('table'), componentStyles]\n *\n * // ore-datagrid\n * styles: [tableBaseMixin('datagrid'), componentStyles]\n * ```\n */\nexport const tableBaseMixin = (prefix: string) => css`\n  @layer refine.base {\n    :host {\n      /* ── Public token API ─────────────────────────────────────────────── */\n      --_bg: var(--${prefix}-bg, var(--color-canvas));\n      --_border-color: var(--${prefix}-border-color, var(--color-contrast-200));\n      --_radius: var(--${prefix}-radius, var(--rounded-xl));\n      --_header-bg: var(--${prefix}-header-bg, var(--color-contrast-50));\n      --_accent: var(--${prefix}-accent, var(--color-neutral-focus));\n      --_row-hover-bg: var(--${prefix}-row-hover-bg, color-mix(in oklch, var(--_accent) 6%, transparent));\n      --_stripe-bg: var(--${prefix}-stripe-bg, color-mix(in oklch, var(--color-contrast-900) 3%, transparent));\n      --_cell-padding-x: var(--${prefix}-cell-padding-x, var(--size-3));\n      --_cell-padding-y: var(--${prefix}-cell-padding-y, var(--size-2-5));\n      --_font-size: var(--${prefix}-font-size, var(--text-sm));\n\n      display: block;\n      overflow: hidden;\n      background: var(--_bg);\n      border: var(--border) solid var(--_border-color);\n      border-radius: var(--_radius);\n      box-shadow: var(--${prefix}-shadow, var(--shadow-sm));\n    }\n\n    /* ── Scroll wrapper ─────────────────────────────────────────────────── */\n\n    .scroll-container {\n      overflow: auto;\n      max-height: var(--${prefix}-max-height, none);\n    }\n\n    /* ── Native table ───────────────────────────────────────────────────── */\n\n    table {\n      width: 100%;\n      font-size: var(--_font-size);\n      table-layout: auto;\n      border-collapse: collapse;\n      background: var(--_bg);\n    }\n\n    /* ── Loading state ──────────────────────────────────────────────────── */\n\n    :host([loading]) .scroll-container {\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: wait;\n    }\n  }\n\n  @layer refine.variants {\n    /* Bordered */\n    :host([bordered]) {\n      overflow: hidden;\n      border: var(--border) solid var(--_border-color);\n      border-radius: var(--_radius);\n      box-shadow: var(--shadow-xs);\n    }\n\n    :host([bordered]) .scroll-container {\n      border-radius: inherit;\n      clip-path: inset(0 round var(--_radius));\n    }\n\n    /* Sticky header */\n    :host([sticky]) .scroll-container {\n      max-height: var(--${prefix}-sticky-max-height, 24rem);\n      overflow-y: auto;\n    }\n  }\n\n  @layer refine.density {\n    :host([density='compact']) {\n      --_cell-padding-x: var(--size-2);\n      --_cell-padding-y: var(--size-1-5);\n    }\n\n    :host([density='cozy']) {\n      --_cell-padding-x: var(--size-3);\n      --_cell-padding-y: var(--size-2-5);\n    }\n\n    :host([density='comfortable']) {\n      --_cell-padding-x: var(--size-4);\n      --_cell-padding-y: var(--size-3-5);\n    }\n  }\n\n  @layer refine.overrides {\n    :host([fullwidth]) {\n      width: 100%;\n    }\n  }\n`;\n"],"mappings":"+BAwBA,IAAa,EAAkB,GAAmB,EAAA,GAAG;;;;qBAIhC,EAAO;+BACG,EAAO;yBACb,EAAO;4BACJ,EAAO;yBACV,EAAO;+BACD,EAAO;4BACV,EAAO;iCACF,EAAO;iCACP,EAAO;4BACZ,EAAO;;;;;;;0BAOT,EAAO;;;;;;;0BAOP,EAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsCP,EAAO"}