/** * `pg-classic-theme` — **the default skin**, pitched to match AG Grid's Quartz. * * Applied automatically when a grid names no `variant` and no legacy `theme` * (see `GridCore.initialize`), so it is the look most Photon grids ship with. * * ## How Quartz is built, and why this mirrors it * * Quartz derives its entire palette from **three literals** — a background, a * foreground and an accent — and `color-mix`es everything else out of them. * That is why the theme holds together: borders, chrome, disabled text and * every state wash are all the same two hues at different strengths, so nothing * can drift out of tune when one value is edited. * * This file reproduces that construction exactly: * * - `--pg-classic-bg` / `--pg-classic-fg` / `--pg-classic-accent` are the only * literals. Every other colour below is a `color-mix` against one of them. * - Dark mode re-pitches **only those three** (plus the handful Quartz itself * overrides), and the whole skin follows. See the `[data-pg-mode="dark"]` * block. * * Values are taken from `ag-theme-quartz.css` (ag-grid-community 32.3.3) rather * than eyeballed, including the mix percentages. The notable ones: * * | Quartz variable | Value | * |-----------------------------------|----------------------------------------| * | `--ag-active-color` | `#2196f3` | * | `--ag-background-color` | `#fff` | * | `--ag-foreground-color` | `#181d1f` | * | `--ag-border-color` | fg at 15% | * | `--ag-header-background-color` | bg mixed with fg at 2% | * | `--ag-menu-background-color` | bg mixed with fg at 3% | * | `--ag-menu-border-color` | fg at 20% | * | `--ag-row-hover-color` | accent at 12% | * | `--ag-selected-row-background-color` | accent at 8% | * | `--ag-range-selection-background-color` | accent at 20% | * | `--ag-border-radius` | `4px` (controls) | * | `--ag-wrapper-border-radius` | `8px` (the grid's own edge) | * | `--ag-font-size` | `14px` | * | `--ag-header-height` | `48px` (`font-size + grid-size * 4.25`)| * | `--ag-row-height` | `42px` (`font-size + grid-size * 3.5`) | * * ## Three things Quartz deliberately does *not* do * * 1. **No header hover.** Quartz defines no hover state on header cells; the * only affordances that light up are the menu and filter buttons. There is * no `.pg-th:hover` rule below, and the base stylesheet's equivalents are * already commented out — leave both that way. * 2. **No vertical column separators.** Quartz leaves * `--ag-header-column-separator-display` at its `none` default, so the header * reads as one band ruled off from the data by a single bottom border. * 3. **No zebra striping.** Quartz defines no odd-row colour at all. Photon's * `rowShading` is opt-in, so the alt-row token is kept but pitched at the * same 2% as the header — a stripe the host asked for, in Quartz's own key. * * ## How a variant is built * * A variant is a *cosmetic skin* layered over the active colour mode. Two * selector roots are in play, and the difference matters: * * - `.pg-classic-theme .pg-…` — scoped to the grid container. Correct per * instance, so two grids on one page can wear different skins. * - `[data-pg-variant="classic"] .pg-…` — matches the per-grid **portal host** * (`theme/overlay-portal.ts`), a `display: contents` element in `` that * carries this grid's scope, mode and variant. Required for context menus, * dropdown panels, the column chooser and toasts, which are portaled out of * the container and would otherwise resolve whichever grid last wrote to the * document root. * * Body row height is deliberately absent from the CSS: rows are positioned with * inline `top`/`height`, so density comes from `THEME_VARIANT_ROW_HEIGHT` in * `types/theme.types.ts`, where classic carries Quartz's 42px. */ export declare const themeClassicCss = "\n\n/* \u2500\u2500 Tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-classic-theme .pg-grid,\n[data-pg-variant=\"classic\"] .pg-context-menu,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__submenu,\n[data-pg-variant=\"classic\"] .pg-actions-menu,\n[data-pg-variant=\"classic\"] .pg-col-chooser__overlay,\n[data-pg-variant=\"classic\"] .pg-dropdown-editor__panel,\n[data-pg-variant=\"classic\"] .pg-long-text-overlay,\n[data-pg-variant=\"classic\"] .pg-avatar-overlay,\n[data-pg-variant=\"classic\"] .pg-toast-layer,\n[data-pg-variant=\"classic\"] .pg-confirm-backdrop,\n[data-pg-variant=\"classic\"] .pg-drag-preview,\n[data-pg-variant=\"classic\"] .pg-col-drag-ghost {\n /* \u2500\u2500 The three literals everything else is mixed from \u2500\u2500 */\n --pg-classic-bg: #fff;\n --pg-classic-fg: #181d1f;\n --pg-classic-accent: #2196f3;\n\n /* Two chrome planes, exactly Quartz's: the header band sits 2% toward the\n foreground, menus and floating panels 3%. Named so both stay re-pitchable\n from one place and cannot drift apart as regions are added. */\n --pg-classic-chrome: color-mix(in srgb, var(--pg-classic-bg), var(--pg-classic-fg) 2%);\n --pg-classic-menu: color-mix(in srgb, var(--pg-classic-bg), var(--pg-classic-fg) 3%);\n /* Menus and panels carry a heavier edge than the grid's interior hairlines. */\n --pg-classic-menu-border: color-mix(in srgb, transparent, var(--pg-classic-fg) 20%);\n\n /* Interaction washes for the small chrome controls that sit *on* the chrome\n planes \u2014 the header's funnel and overflow buttons today, anything similar\n added later. They are foreground tints rather than a flat colour on purpose:\n mixed against transparent they compose over whichever plane the control\n happens to sit on (header band, filter row, a pinned panel) instead of\n stamping one plane's colour onto another, and because --pg-classic-fg\n flips with the mode they re-pitch themselves in dark without a second\n definition.\n\n They cannot resolve --pg-colors-background-alt, which is what the base\n stylesheet uses: in this skin that token *is* the header band, so a hover\n drawn from it repaints the header in the header's own colour and nothing\n appears to happen. */\n --pg-classic-control-hover: color-mix(in srgb, transparent, var(--pg-classic-fg) 9%);\n --pg-classic-control-pressed: color-mix(in srgb, transparent, var(--pg-classic-fg) 16%);\n\n /* \u2500\u2500 Accent \u2500\u2500 */\n --pg-colors-primary: var(--pg-classic-accent);\n --pg-colors-primary-hover: color-mix(in srgb, var(--pg-classic-accent), #000 12%);\n --pg-colors-primary-active: color-mix(in srgb, var(--pg-classic-accent), #000 24%);\n --pg-colors-primary-light: color-mix(in srgb, transparent, var(--pg-classic-accent) 20%);\n --pg-colors-primary-contrast: #fff;\n --pg-colors-on-primary: #fff;\n --pg-colors-primary-text: #fff;\n /* The three accent washes Quartz actually ships: selection 8%, hover 12%,\n range 20%. Every state tint below resolves one of these. */\n --pg-colors-primary-subtle: color-mix(in srgb, transparent, var(--pg-classic-accent) 8%);\n --pg-colors-primary-subtle-hover: color-mix(in srgb, transparent, var(--pg-classic-accent) 12%);\n --pg-colors-primary-soft: color-mix(in srgb, transparent, var(--pg-classic-accent) 20%);\n\n --pg-colors-secondary: color-mix(in srgb, transparent, var(--pg-classic-fg) 70%);\n --pg-colors-secondary-hover: color-mix(in srgb, transparent, var(--pg-classic-fg) 85%);\n\n /* \u2500\u2500 Surfaces \u2500\u2500 */\n /* Pitched at the chrome plane, i.e. the same colour as the header band\n (--pg-colors-header-background below), so panels and sections that paint\n themselves with --pg-colors-surface read as one continuous piece of chrome\n with the header instead of punching the grid's ground colour through it.\n Re-pitches itself in dark mode with --pg-classic-chrome. */\n --pg-colors-surface: var(--pg-classic-chrome);\n --pg-colors-surface-raised: var(--pg-classic-bg);\n --pg-colors-surface-overlay: var(--pg-classic-menu);\n --pg-colors-surface-sunken: var(--pg-classic-chrome);\n --pg-colors-background: var(--pg-classic-bg);\n /* Toolbar, tool panels and the grouping bar read this one. */\n --pg-colors-background-alt: var(--pg-classic-chrome);\n\n /* \u2500\u2500 Borders \u2500\u2500 */\n --pg-colors-border: color-mix(in srgb, transparent, var(--pg-classic-fg) 15%);\n --pg-colors-border-strong: var(--pg-classic-menu-border);\n --pg-colors-border-focus: var(--pg-classic-accent);\n --pg-colors-border-ctxt-menu: var(--pg-colors-border);\n\n /* \u2500\u2500 Text \u2500\u2500 */\n --pg-colors-text-primary: var(--pg-classic-fg);\n --pg-colors-text-secondary: color-mix(in srgb, transparent, var(--pg-classic-fg) 70%);\n --pg-colors-text-disabled: color-mix(in srgb, transparent, var(--pg-classic-fg) 50%);\n --pg-colors-text-inverse: var(--pg-classic-bg);\n\n /* \u2500\u2500 Header \u2500\u2500 */\n --pg-colors-header-background: var(--pg-classic-chrome);\n --pg-colors-header-text: var(--pg-classic-fg);\n --pg-colors-header-border: var(--pg-colors-border);\n /* Quartz has no header hover. This token is *not* pointed at the header\n background, because it is also the hover for column-menu items and the\n serial-selection gutter, where a highlight is correct. The header simply\n ships no :hover rule \u2014 see the note in this file's header. */\n --pg-colors-header-hover: var(--pg-colors-primary-subtle-hover);\n\n /* \u2500\u2500 Rows and cells \u2500\u2500 */\n --pg-colors-row-background: var(--pg-classic-bg);\n /* Quartz defines no odd-row colour; Photon's shading is opt-in, so this is\n pitched at the header's 2% rather than switched off. */\n --pg-colors-row-background-alt: var(--pg-classic-chrome);\n --pg-colors-row-hover: var(--pg-colors-primary-subtle-hover);\n --pg-colors-row-selected: var(--pg-colors-primary-subtle);\n --pg-colors-row-selected-border: color-mix(in srgb, transparent, var(--pg-classic-accent) 40%);\n --pg-colors-cell-edit-background: var(--pg-classic-bg);\n --pg-colors-cell-edit-border: var(--pg-classic-accent);\n --pg-colors-selection-background: var(--pg-colors-primary-soft);\n --pg-colors-selection-border: var(--pg-classic-accent);\n --pg-colors-selection-corner: var(--pg-classic-accent);\n --pg-colors-pinned-background: var(--pg-classic-bg);\n --pg-colors-pinned-border: var(--pg-colors-border);\n\n /* \u2500\u2500 Structural bands \u2500\u2500 */\n --pg-colors-filter-background: var(--pg-classic-chrome);\n --pg-colors-filter-border: var(--pg-colors-border);\n --pg-colors-filter-active-background: var(--pg-colors-primary-subtle);\n --pg-colors-filter-active-border: var(--pg-classic-accent);\n --pg-colors-footer-background: var(--pg-classic-chrome);\n --pg-colors-footer-text: var(--pg-classic-fg);\n --pg-colors-footer-border: var(--pg-colors-border);\n --pg-colors-group-row-background: var(--pg-classic-chrome);\n --pg-colors-group-row-border: var(--pg-colors-border);\n --pg-colors-group-row-hover: var(--pg-colors-primary-subtle);\n --pg-colors-group-row-text: var(--pg-classic-fg);\n --pg-colors-group-footer-background: var(--pg-classic-chrome);\n --pg-colors-group-footer-hover: var(--pg-colors-primary-subtle);\n --pg-colors-group-zone-over: var(--pg-colors-primary-subtle);\n --pg-colors-group-toggle-hover: color-mix(in srgb, transparent, var(--pg-classic-fg) 7%);\n --pg-colors-agg-text: var(--pg-colors-text-secondary);\n\n /* \u2500\u2500 Scrollbars \u2500\u2500 */\n --pg-colors-scrollbar-bg: var(--pg-classic-chrome);\n --pg-colors-scrollbar-track: var(--pg-classic-chrome);\n --pg-colors-scrollbar-thumb: color-mix(in srgb, transparent, var(--pg-classic-fg) 25%);\n --pg-colors-scrollbar-thumb-hover: color-mix(in srgb, transparent, var(--pg-classic-fg) 40%);\n\n /* \u2500\u2500 Controls \u2500\u2500 */\n /* Quartz's unchecked box is the background mixed 30% toward the foreground \u2014\n a solid edge rather than a tint, so an empty checkbox is unmistakable. */\n --pg-colors-checkbox-border: color-mix(in srgb, var(--pg-classic-bg), var(--pg-classic-fg) 30%);\n --pg-colors-checkbox-background: var(--pg-classic-bg);\n --pg-colors-checkbox-checked-background: var(--pg-classic-accent);\n --pg-colors-resize-handle-color: var(--pg-colors-border);\n --pg-colors-resize-handle-active-color: var(--pg-classic-accent);\n\n /* \u2500\u2500 Chips and badges \u2500\u2500 */\n --pg-colors-chip-background: color-mix(in srgb, transparent, var(--pg-classic-fg) 7%);\n --pg-colors-chip-text: var(--pg-classic-fg);\n --pg-colors-badge-background: var(--pg-colors-primary-subtle-hover);\n --pg-colors-badge-text: var(--pg-colors-primary-active);\n\n /* \u2500\u2500 Drag \u2500\u2500 */\n --pg-colors-drag-preview-background: var(--pg-classic-menu);\n --pg-colors-drag-preview-border: var(--pg-classic-menu-border);\n --pg-colors-drag-over-highlight: var(--pg-colors-primary-subtle);\n --pg-colors-drag-ghost-background: var(--pg-classic-menu);\n --pg-colors-drag-ghost-border-color: var(--pg-classic-menu-border);\n --pg-colors-row-drag-ghost: var(--pg-classic-menu);\n\n /* \u2500\u2500 Overlays and feedback \u2500\u2500 */\n --pg-colors-tooltip-background: var(--pg-classic-chrome);\n --pg-colors-tooltip-text: var(--pg-classic-fg);\n --pg-colors-overlay: color-mix(in srgb, transparent, var(--pg-classic-fg) 45%);\n --pg-colors-overlay-loading: color-mix(in srgb, transparent, var(--pg-classic-bg) 66%);\n --pg-colors-skeleton: color-mix(in srgb, transparent, var(--pg-classic-fg) 12%);\n --pg-colors-skeleton-highlight: color-mix(in srgb, transparent, var(--pg-classic-fg) 6%);\n\n /* \u2500\u2500 Status \u2500\u2500 */\n /* Quartz names only an invalid colour; the rest hold its saturation level. */\n --pg-colors-error: #e02525;\n --pg-colors-danger: #e02525;\n --pg-colors-success: #24a148;\n --pg-colors-warning: #f1c21b;\n --pg-colors-info: var(--pg-classic-accent);\n --pg-colors-error-subtle: color-mix(in srgb, transparent, #e02525 8%);\n --pg-colors-danger-soft: color-mix(in srgb, transparent, #e02525 12%);\n\n /* \u2500\u2500 Typography \u2500\u2500 */\n /* Quartz's own stack. IBM Plex Sans is not bundled \u2014 it is listed first so a\n host that loads it gets an exact match, and the system fallbacks (which are\n Quartz's too) carry every other host. */\n --pg-typography-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\n --pg-typography-font-size-md: 14px;\n --pg-typography-font-size-sm: 13px;\n --pg-typography-font-size-xs: 12px;\n --pg-typography-font-size-lg: 15px;\n --pg-typography-header-font-weight: 500;\n\n /* \u2500\u2500 Geometry \u2500\u2500 */\n /* font-size + grid-size * 4.25 = 14 + 34. */\n --pg-header-row-height: 48px;\n --pg-filter-row-height: 40px;\n /* Quartz separates the grid's own edge (8px) from every control inside it\n (4px); collapsing the two is what makes a lookalike read as \"not quite\". */\n --pg-borders-radius-lg: 8px;\n --pg-borders-radius-md: 4px;\n --pg-borders-radius-sm: 4px;\n --pg-borders-width-focus: 2px;\n --pg-sizing-checkbox-size: 16px;\n --pg-sizing-icon-size-md: 16px;\n --pg-spacing-md: 16px;\n\n /* \u2500\u2500 Shadows \u2500\u2500 */\n --pg-shadows-dropdown: 0 0 16px 0 rgba(0, 0, 0, 0.15);\n --pg-shadows-dialog: 0 0 16px 0 rgba(0, 0, 0, 0.15);\n --pg-shadows-lg: 0 1px 4px 1px rgba(186, 191, 199, 0.4);\n --pg-shadows-md: 0 1px 4px 1px rgba(186, 191, 199, 0.4);\n --pg-shadows-sm: 0 1px 4px 1px rgba(186, 191, 199, 0.4);\n --pg-shadows-tooltip: 0 1px 4px 1px rgba(186, 191, 199, 0.4);\n\n --pg-transitions-duration-fast: 120ms;\n --pg-transitions-duration-base: 160ms;\n\n /* \u2500\u2500 Charts \u2500\u2500 */\n /* Quartz's accent leads; the rest are evenly spaced hues at the same\n saturation so ordering survives both modes. */\n --pg-chart-series-1: #2196f3;\n --pg-chart-series-2: #009688;\n --pg-chart-series-3: #7e57c2;\n --pg-chart-series-4: #ff7043;\n --pg-chart-series-5: #ec407a;\n --pg-chart-series-6: #9ccc65;\n}\n\n/* Dark counterpart. Quartz re-pitches only the literals and the handful of\n values whose mix direction has to invert, and the derived palette above\n follows on its own \u2014 which is the whole point of deriving it.\n\n Written against the container and the portal host, and never against an\n arbitrary ancestor: `[data-pg-mode=\"dark\"] .pg-classic-theme .pg-grid` would\n also match a light classic grid nested inside a dark one (Master/Detail\n mounts a full grid per expanded row), and used to match every grid on the\n page back when the mode was mirrored onto ``. `ThemeManager` puts the\n mode attribute and the variant class on the same container, so the compound\n selector is both sufficient and safe. */\n.pg-classic-theme[data-pg-mode=\"dark\"] .pg-grid,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-context-menu,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-col-ctx-menu,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-col-ctx-menu__submenu,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-actions-menu,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-col-chooser__overlay,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-dropdown-editor__panel,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-long-text-overlay,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-avatar-overlay,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-toast-layer,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-confirm-backdrop,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-drag-preview,\n[data-pg-mode=\"dark\"][data-pg-variant=\"classic\"] .pg-col-drag-ghost {\n /* Quartz's dark ground is a desaturated navy, not neutral black. */\n --pg-classic-bg: color-mix(in srgb, #fff, #182230 97%);\n --pg-classic-fg: #fff;\n\n /* Chrome now lifts *away* from the ground rather than sinking into it, so\n these two cannot be the light mixes read in reverse. */\n --pg-classic-chrome: color-mix(in srgb, #fff, #182230 93%);\n --pg-classic-menu: color-mix(in srgb, var(--pg-classic-bg), #fff 10%);\n --pg-classic-menu-border: color-mix(in srgb, transparent, #fff 10%);\n\n /* Flat white at 15% reads heavier on a dark ground than on a light one. */\n --pg-colors-border: rgba(255, 255, 255, 0.16);\n\n /* Quartz lifts both washes in dark mode and collapses selected onto hover:\n an 8% tint is invisible over a dark ground. */\n --pg-colors-row-hover: color-mix(in srgb, transparent, var(--pg-classic-accent) 20%);\n --pg-colors-row-selected: var(--pg-colors-row-hover);\n --pg-colors-header-hover: var(--pg-colors-row-hover);\n\n --pg-colors-checkbox-border: color-mix(in srgb, var(--pg-classic-bg), var(--pg-classic-fg) 40%);\n --pg-colors-tooltip-background: color-mix(in srgb, #fff, #182230 96%);\n\n --pg-shadows-dropdown: 0 0 20px rgba(0, 0, 0, 0.3);\n --pg-shadows-dialog: 0 0 20px rgba(0, 0, 0, 0.3);\n --pg-shadows-lg: 0 1px 20px 1px #000;\n --pg-shadows-md: 0 1px 20px 1px #000;\n --pg-shadows-sm: 0 1px 20px 1px #000;\n --pg-shadows-tooltip: 0 1px 20px 1px #000;\n\n --pg-colors-skeleton: rgba(202, 203, 204, 0.4);\n}\n\n/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-classic-theme .pg-grid {\n border: 1px solid var(--pg-colors-border);\n border-radius: var(--pg-borders-radius-lg);\n /* Clips the corners of the header band and the horizontal scrollbar so the\n radius reads as the grid's own edge rather than a rectangle behind it. */\n overflow: hidden;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* The rule the whole theme hangs on: one hairline under the header is what\n separates the column names from the first row of data. Sits on the band, not\n on each cell, so it stays unbroken across pinned-panel boundaries. */\n.pg-classic-theme .pg-grid__header {\n border-bottom: 1px solid var(--pg-colors-header-border);\n}\n\n/* Header labels read as words, not as a shouted band. The base sheet uppercases\n every .pg-th; Quartz does not, and neither does this skin \u2014 a column called\n \"Full Name\" is drawn \"Full Name\".\n\n Nothing is transformed on the way in: an omitted header is already derived in\n Title Case by ColumnModel (fullName \u2192 \"Full Name\"), so \"none\" gives Title Case\n for the default and leaves an explicit header exactly as the author wrote it \u2014\n which \"capitalize\" would not, mangling \"eBay ID\" into \"EBay ID\".\n\n Also lands on the grouping column's own header and on column-group headers,\n both of which carry .pg-th. */\n.pg-classic-theme .pg-th {\n color: var(--pg-colors-header-text);\n font-size: var(--pg-typography-font-size-md);\n font-weight: var(--pg-typography-header-font-weight);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* Two rules are deliberately absent here: a hover state on header cells, and an\n adjacent-sibling separator between them. Quartz ships neither. See the \"three\n things Quartz deliberately does not do\" note at the top of this file before\n adding either back. */\n\n/* \u2500\u2500 Applied sort / filter: shape, never colour \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n A sorted or filtered column announces itself with a *glyph* \u2014 the direction\n arrow appears, the funnel fills in \u2014 and nothing else moves. The header text\n stays the same colour as every other header, and both icons keep the muted\n tone they wear at rest.\n\n This is what AG Grid does, and the reason is legibility rather than taste: an\n accent-coloured header label reads as a link, so on a grid sorted by three\n columns the eye is drawn to the chrome instead of to the data. The state is\n still fully conveyed \u2014 by an icon that is either there or not, which also\n survives greyscale printing and does not depend on colour perception.\n\n These override the base stylesheet's accent rules for the same states. Equal\n specificity, and the variant sheet is concatenated after the base one (see\n styles/base-styles.ts), so later-wins settles it without !important. */\n.pg-classic-theme .pg-th--sorted {\n color: var(--pg-colors-header-text);\n}\n\n/* Opacity is deliberately left at the base rule's 1: the arrow is the entire\n state indicator, so it has to be visible \u2014 it just isn't accented. */\n.pg-classic-theme .pg-th.pg-th--sort-asc .pg-th__sort-icon,\n.pg-classic-theme .pg-th.pg-th--sort-desc .pg-th__sort-icon {\n color: var(--pg-colors-text-secondary);\n}\n\n/* The label of a filtered column, which the base sheet also accents. */\n.pg-classic-theme .pg-th.pg-th--filter-active .pg-th__label {\n color: inherit;\n}\n\n/* Same for both funnels \u2014 the header button and the filter row's own icon.\n Full opacity (they are applied, so they stay legible and permanently\n visible) at the colour they wear when they are not. */\n.pg-classic-theme .pg-th__filter-btn--active,\n.pg-classic-theme .pg-filter-cell__icon--active {\n color: var(--pg-colors-text-secondary);\n}\n\n/* \u2500\u2500 Header affordances: the funnel and the overflow button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n These two are the only things in a classic header that light up (see the \"no\n header hover\" note at the top), so they have to do it convincingly.\n\n One box for both. The base sheet pads them differently \u2014 4px on the funnel,\n 6px on the \"\u22EE\" \u2014 which is invisible while they are transparent and obvious the\n moment a hover wash is painted behind them: two pills of different sizes,\n vertically off-centre against each other. A fixed square at the control radius\n makes them read as a pair and gives each a 20px target, comfortably above the\n 14px glyph it holds.\n\n The resting tone is unified for the same reason: the base sheet parts them at\n 0.7 and 0.6, a difference that is visible at this size and justified by\n nothing. */\n.pg-classic-theme .pg-th__filter-btn,\n.pg-classic-theme .pg-th__menu-btn {\n width: 20px;\n height: 20px;\n padding: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(--pg-borders-radius-sm);\n opacity: 0.75;\n color: var(--pg-colors-text-secondary);\n /* The base rule transitions opacity and background but not colour on the\n overflow button; restated here as one shorthand so both buttons resolve the\n same three properties and neither can snap while the other fades. */\n transition:\n background var(--pg-transitions-duration-fast) ease,\n color var(--pg-transitions-duration-fast) ease,\n opacity var(--pg-transitions-duration-fast) ease;\n}\n\n/* An applied funnel stays fully legible at rest \u2014 it is the entire indicator\n that the column is filtered. Restated because the rule above pitches the\n resting opacity for both buttons at equal specificity and would otherwise dim\n it back down. */\n.pg-classic-theme .pg-th__filter-btn--active {\n opacity: 1;\n}\n\n/* Hover: the wash carries the state and the glyph goes to full foreground.\n Colour is deliberately *not* the accent \u2014 an accent-tinted funnel reads as\n \"filter applied\" rather than \"the pointer is here\", and applied state in this\n skin is carried by the glyph alone (see the section above). */\n.pg-classic-theme .pg-th__filter-btn:hover,\n.pg-classic-theme .pg-th__menu-btn:hover {\n opacity: 1;\n color: var(--pg-colors-text-primary);\n background: var(--pg-classic-control-hover);\n}\n\n/* Pressed, and \u2014 for the overflow button \u2014 held open. --active on the menu\n button means \"its menu is on screen\", so it keeps the pressed wash for as long\n as the menu is up, which is what ties the popup to the button that opened it.\n (On the funnel, --active means \"this column is filtered\", a different thing\n entirely, handled above.) */\n.pg-classic-theme .pg-th__filter-btn:active,\n.pg-classic-theme .pg-th__menu-btn:active,\n.pg-classic-theme .pg-th__menu-btn--active {\n opacity: 1;\n color: var(--pg-colors-text-primary);\n}\n\n/* \u2500\u2500 Rows and cells \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-classic-theme .pg-row {\n border-bottom: 1px solid var(--pg-colors-border);\n}\n\n/* Selection is a 2px accent rail over the row wash: legible instantly without\n fighting the row's own background, and it survives alternate-row shading. */\n.pg-classic-theme .pg-row--selected {\n box-shadow: inset 2px 0 0 var(--pg-colors-primary);\n}\n\n/* Quartz's cell padding is grid-size * 2. */\n.pg-classic-theme .pg-cell__inner {\n padding: 0 12px;\n}\n\n/* The number gutter and the group-column header read as chrome, not as data. */\n.pg-classic-theme .pg-cell--serial,\n.pg-classic-theme .pg-th--serial,\n.pg-classic-theme .pg-filter-cell--serial,\n.pg-classic-theme .pg-th--no-group {\n background: var(--pg-classic-chrome);\n}\n\n/* \u2500\u2500 Structural bands \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Each band carries the hairline on the edge that faces the data, so the grid\n reads as bands of chrome around a field of rows however many are enabled. */\n.pg-classic-theme .pg-filter-row,\n.pg-classic-theme .pg-group-drop-zone {\n border-bottom: 1px solid var(--pg-colors-border);\n}\n\n.pg-classic-theme .pg-grid__footer,\n.pg-classic-theme .pg-summary--bottom {\n border-top: 1px solid var(--pg-colors-border);\n}\n\n/* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* An inset ring rather than an outline: an outline on an element at the edge of\n a scroll container is clipped, and on a pinned column it is painted over by\n the neighbouring panel.\n\n .pg-cell is deliberately absent. Cells are not focus-ringed by the theme \u2014\n the grid draws its own indicator on .pg-cell--active-cell (see\n base/cells.css.ts, which sets \"outline: none\" on .pg-cell for exactly this\n reason) and that class is what moves with the arrow keys.\n\n A .pg-cell:focus-visible rule here does not merely duplicate it, it strands\n it: CellSelectionEngine.moveActiveCell moves the active-cell *class* without\n moving DOM focus, so focus stays on whichever cell was first clicked. Add the\n rule back and that cell keeps a ring for the rest of the navigation \u2014 two\n ringed cells at once, one of them wrong. If cells should ever carry a real\n focus ring, the engine has to move focus with the active cell first. */\n.pg-classic-theme .pg-th:focus-visible,\n.pg-classic-theme .pg-pagination__btn:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 var(--pg-borders-width-focus) var(--pg-colors-primary);\n}\n\n/* Quartz's input focus: the accent border plus a 47% halo, on every control the\n grid owns. One rule rather than per-control, so a control added later is\n already correct. */\n.pg-classic-theme .pg-filter-input:focus,\n.pg-classic-theme .pg-filter-cond__input:focus,\n.pg-classic-theme .pg-filter-cond__select:focus,\n.pg-classic-theme .pg-filter-set__search-input:focus,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu input:focus,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu select:focus {\n outline: none;\n border-color: var(--pg-colors-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, transparent, var(--pg-colors-primary) 47%);\n}\n\n/* \u2500\u2500 Menus, panels and the filters tool panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Quartz paints every floating surface from one colour \u2014 menus, popups, tool\n panels and the column chooser all sit on --ag-menu-background-color, 3% toward\n the foreground, with a heavier 20% border than the grid's interior hairlines.\n That single plane is what makes its overlays read as one system, so classic\n reproduces it rather than splitting menus from panels.\n *\n * Portaled nodes live in a per-grid portal host outside .pg-grid, so they are\n * matched from [data-pg-variant] (carried by that host \u2014 see\n * theme/overlay-portal.ts). The in-grid panels take the container-scoped root. */\n[data-pg-variant=\"classic\"] .pg-context-menu,\n[data-pg-variant=\"classic\"] .pg-context-menu__sub,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__submenu,\n[data-pg-variant=\"classic\"] .pg-actions-menu,\n[data-pg-variant=\"classic\"] .pg-col-chooser,\n[data-pg-variant=\"classic\"] .pg-dropdown-editor__panel,\n[data-pg-variant=\"classic\"] .pg-long-text-overlay,\n[data-pg-variant=\"classic\"] .pg-avatar-overlay,\n[data-pg-variant=\"classic\"] .pg-toast,\n.pg-classic-theme .pg-filters-panel,\n.pg-classic-theme .pg-filter-panel,\n.pg-classic-theme .pg-import-menu {\n background: var(--pg-classic-menu);\n border-color: var(--pg-classic-menu-border);\n box-shadow: var(--pg-shadows-dropdown);\n}\n\n/* Hover states have to move with the surface. The menus' defaults read\n --pg-colors-background-alt / --pg-colors-header-hover, and on the menu plane\n a chrome-tinted hover would be invisible. The accent wash is used instead,\n matching the row hover, so the highlight stays legible in both modes. */\n[data-pg-variant=\"classic\"] .pg-context-menu__item:hover,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item:hover,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item:focus,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item:focus-visible,\n[data-pg-variant=\"classic\"] .pg-actions-menu__item:hover:not(:disabled),\n.pg-classic-theme .pg-filters-panel__close:hover {\n background: var(--pg-colors-primary-subtle-hover);\n}\n\n/* Separators inside a menu: --pg-colors-border is pitched to divide rows against\n the grid background and all but vanishes on the raised menu plane. */\n[data-pg-variant=\"classic\"] .pg-context-menu__sep,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__separator {\n background: var(--pg-classic-menu-border);\n border-top-color: var(--pg-classic-menu-border);\n}\n\n/* Any control the user types into or picks from, wherever it lands inside a\n menu, takes the plain background so it reads as an input rather than as more\n chrome. Scoped to the menus rather than written per-control: the column menu\n embeds filter controls, and this keeps a control added later correct. */\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu input:not([type='checkbox']):not([type='radio']),\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu select,\n[data-pg-variant=\"classic\"] .pg-context-menu input:not([type='checkbox']):not([type='radio']),\n[data-pg-variant=\"classic\"] .pg-context-menu select,\n.pg-classic-theme .pg-filter-panel input:not([type='checkbox']):not([type='radio']),\n.pg-classic-theme .pg-filter-panel select {\n background: var(--pg-colors-surface);\n border-color: var(--pg-colors-border);\n border-radius: var(--pg-borders-radius-md);\n}\n\n/* Inside the filters tool panel the relationship inverts: the panel is now the\n raised plane, so the pieces that used to lift off it take the grid background\n instead \u2014 otherwise section heads and the add button dissolve into their own\n background. */\n.pg-classic-theme .pg-filters-section__header,\n.pg-classic-theme .pg-filters-panel__add-btn {\n background: var(--pg-colors-surface);\n}\n\n/* \u2500\u2500 Menu anatomy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* The grid ships two menu implementations \u2014 the row/range menu\n (.pg-context-menu, nested submenus) and the column menu (.pg-col-ctx-menu,\n portaled fly-outs) \u2014 which grew separate item metrics, separate icon muting\n (colour vs opacity) and separate chevrons. Side by side in the same grid the\n difference reads as sloppiness, so classic re-states both from one set of\n rules. Everything below is deliberately paired: whatever is said about one\n menu is said about the other. */\n\n/* A floating menu takes the wrapper radius, not the control radius: at 4px a\n 192px-wide popup reads as a rectangle with the corners filed off. */\n[data-pg-variant=\"classic\"] .pg-context-menu,\n[data-pg-variant=\"classic\"] .pg-context-menu__sub,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__submenu,\n[data-pg-variant=\"classic\"] .pg-actions-menu {\n padding: 6px;\n border-radius: var(--pg-borders-radius-sm);\n}\n\n/* One item shape for both menus: a pill that the hover wash fills, inset from\n the menu edge by the padding above. Without the radius the wash runs corner\n to corner and fights the menu's own rounding. */\n[data-pg-variant=\"classic\"] .pg-context-menu__item,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item,\n[data-pg-variant=\"classic\"] .pg-actions-menu__item {\n gap: 8px;\n padding: 7px 10px;\n border-radius: var(--pg-borders-radius-sm);\n font-size: var(--pg-typography-font-size-sm);\n font-weight: 500;\n line-height: 1.4;\n color: var(--pg-colors-text-primary);\n transition:\n background var(--pg-transitions-duration-fast) ease,\n color var(--pg-transitions-duration-fast) ease;\n}\n\n/* Fly-out items are the *same* text as the menu that opened them \u2014 same family,\n same size, same weight \u2014 and are separated from it by plane alone: their own\n surface, their own border, their own shadow, offset to the right.\n\n Weight is restated rather than left to inherit because the column menu's\n fly-out is portaled (see below): it is not a descendant of the menu it belongs\n to, so nothing about the parent's text reaches it by inheritance. A weight\n step here would also fight the reading order \u2014 the leaf is a refinement of the\n row above it (\"Resize \u203A Auto Size\"), not a heading.\n\n The row menu nests its fly-out (.pg-context-menu__sub) while the column menu\n portals its own (.pg-col-ctx-menu__submenu); the descendant selector covers\n both, since a portaled submenu still lands inside the same portal host. */\n[data-pg-variant=\"classic\"] .pg-context-menu__sub .pg-context-menu__item,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__submenu .pg-col-ctx-menu__item {\n font-size: var(--pg-typography-font-size-sm);\n font-weight: 500;\n}\n\n/* Icons are muted by *colour*, not opacity. Opacity fades the glyph toward the\n menu plane and makes a 16px stroke look broken up; a colour mix keeps it\n solid and lets the icon lift cleanly to the accent on hover. */\n[data-pg-variant=\"classic\"] .pg-context-menu__icon,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item-icon,\n[data-pg-variant=\"classic\"] .pg-actions-menu__icon {\n width: 16px;\n height: 16px;\n opacity: 1;\n color: color-mix(in srgb, transparent, var(--pg-classic-fg) 62%);\n transition: color var(--pg-transitions-duration-fast) ease;\n}\n[data-pg-variant=\"classic\"] .pg-context-menu__icon svg,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item-icon svg,\n[data-pg-variant=\"classic\"] .pg-actions-menu__icon svg {\n width: 16px;\n height: 16px;\n display: block;\n}\n\n/* The icon carries the hover, not the label: colouring the text as well makes\n the whole row jump, while an accent glyph beside steady text reads as a\n pointer. */\n[data-pg-variant=\"classic\"] .pg-context-menu__item:hover > .pg-context-menu__icon,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item:hover .pg-col-ctx-menu__item-icon,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item:focus .pg-col-ctx-menu__item-icon,\n[data-pg-variant=\"classic\"] .pg-actions-menu__item:hover:not(:disabled) .pg-actions-menu__icon {\n color: var(--pg-colors-primary);\n}\n\n/* An applied state (the active sort, the chosen aggregate) is the one place the\n label itself takes the accent. 500 rather than 600 \u2014 at 13px the heavier\n weight sets the row apart more than \"currently applied\" warrants. */\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item--active {\n color: var(--pg-colors-primary);\n font-weight: 500;\n}\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item--active .pg-col-ctx-menu__item-icon,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item-check {\n color: var(--pg-colors-primary);\n opacity: 1;\n}\n\n/* Shortcut hints sit right-aligned against the label. Tabular figures stop\n \"Ctrl+X\" and \"Ctrl+C\" from shifting width against each other down the list. */\n[data-pg-variant=\"classic\"] .pg-context-menu__kbd {\n font-size: var(--pg-typography-font-size-xs);\n font-weight: 400;\n font-variant-numeric: tabular-nums;\n letter-spacing: 0.02em;\n color: color-mix(in srgb, transparent, var(--pg-classic-fg) 45%);\n}\n\n/* Both chevrons drawn the same way. The row menu's default is a \"\u203A\" text glyph\n whose weight and vertical centring follow whatever font is loaded; a\n border-drawn caret matches the column menu's registry icon at any font, and\n holds its stroke on a HiDPI screen. */\n[data-pg-variant=\"classic\"] .pg-context-menu__item--has-sub::after {\n content: '';\n right: 11px;\n width: 6px;\n height: 6px;\n border: 0;\n border-right: 1.5px solid color-mix(in srgb, transparent, var(--pg-classic-fg) 45%);\n border-bottom: 1.5px solid color-mix(in srgb, transparent, var(--pg-classic-fg) 45%);\n transform: translateY(-50%) rotate(-45deg);\n transition: border-color var(--pg-transitions-duration-fast) ease;\n}\n[data-pg-variant=\"classic\"] .pg-context-menu__item--has-sub:hover::after {\n border-right-color: var(--pg-colors-primary);\n border-bottom-color: var(--pg-colors-primary);\n}\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item-chevron {\n opacity: 1;\n color: color-mix(in srgb, transparent, var(--pg-classic-fg) 45%);\n}\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item--has-submenu:hover .pg-col-ctx-menu__item-chevron {\n opacity: 1;\n color: var(--pg-colors-primary);\n}\n\n/* Separators are inset to the pill's edges rather than run full-bleed, so they\n divide the items rather than cutting the menu in half. */\n[data-pg-variant=\"classic\"] .pg-context-menu__sep,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__separator {\n height: 1px;\n margin: 5px 6px;\n border: 0;\n}\n\n/* One disabled treatment for both menus, matching Quartz's 50% disabled text. */\n[data-pg-variant=\"classic\"] .pg-context-menu__item--disabled,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item--disabled {\n opacity: 1;\n color: var(--pg-colors-text-disabled);\n}\n[data-pg-variant=\"classic\"] .pg-context-menu__item--disabled .pg-context-menu__icon,\n[data-pg-variant=\"classic\"] .pg-col-ctx-menu__item--disabled .pg-col-ctx-menu__item-icon {\n color: var(--pg-colors-text-disabled);\n}\n\n/* \u2500\u2500 Checkbox \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-classic-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: var(--pg-sizing-checkbox-size);\n height: var(--pg-sizing-checkbox-size);\n border: 1px solid var(--pg-colors-checkbox-border);\n border-radius: var(--pg-borders-radius-sm);\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition:\n background var(--pg-transitions-duration-fast) ease,\n border-color var(--pg-transitions-duration-fast) ease;\n}\n.pg-classic-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-classic-theme .pg-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px color-mix(in srgb, transparent, var(--pg-colors-primary) 47%);\n}\n.pg-classic-theme .pg-checkbox:checked,\n.pg-classic-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-classic-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 4px;\n top: 1px;\n width: 5px;\n height: 9px;\n border: 2px solid var(--pg-colors-on-primary);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-classic-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 3px;\n top: 6px;\n width: 8px;\n height: 2px;\n background: var(--pg-colors-on-primary);\n}\n.pg-scrollbar-h-row{\n border-top: none;\n}\n .pg-row-drag-ghost {\n // set the body text color to it\n color: var(--pg-classic-fg);\n }\n"; //# sourceMappingURL=theme-classic.d.ts.map