/**
 * Styles for the chart configuration drawer (Chart / Set Up / Customize tabs).
 * The drawer is a child of the chart panel body: it is anchored to the right
 * edge and slides in (right → left) when opened and out (left → right) when
 * closed via a `transform` transition. All colors, spacing and fonts come from
 * Photon theme tokens so the drawer matches light / dark / custom themes with no
 * hardcoded values.
 */
export declare const chartConfigCss = "\n.pg-chart-config {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 30;\n  width: 264px;\n  max-width: 85%;\n  display: flex;\n  flex-direction: column;\n  background: var(--pg-colors-surface, #fff);\n  border-left: 1px solid var(--pg-colors-border, #e2e8f0);\n  /* box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); */\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n  overflow: hidden;\n  transform: translateX(100%);\n  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);\n  will-change: transform;\n}\n.pg-chart-config--open { transform: translateX(0); }\n@media (prefers-reduced-motion: reduce) {\n  .pg-chart-config { transition: none; }\n}\n.pg-chart-config__header {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 6px 0 6px;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  flex-shrink: 0;\n}\n.pg-chart-config__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  border-radius: 4px;\n  cursor: pointer;\n}\n.pg-chart-config__close:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-chart-config__tabs {\n  display: flex;\n  gap: 2px;\n  flex: 1;\n}\n.pg-chart-config__tab {\n  flex: 1;\n  padding: 8px 6px;\n  border: none;\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  font-family: inherit;\n}\n.pg-chart-config__tab:hover { color: var(--pg-colors-text-primary, #0f172a); }\n.pg-chart-config__tab--active {\n  color: var(--pg-colors-primary, #2563eb);\n  border-bottom-color: var(--pg-colors-primary, #2563eb);\n}\n.pg-chart-config__body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 10px 12px;\n}\n.pg-chart-config__group-title {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n  margin: 10px 0 6px;\n}\n.pg-chart-config__gallery {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.pg-chart-config__gallery-item {\n  display: block;\n  height: 58px;\n  padding: 3px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: 6px;\n  background: var(--pg-colors-surface, #fff);\n  cursor: pointer;\n  overflow: hidden;\n  transition: border-color 80ms, background 80ms, box-shadow 80ms;\n}\n.pg-chart-config__gallery-item:hover {\n  border-color: var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-background-alt, #f1f5f9);\n}\n.pg-chart-config__gallery-item--active {\n  border-color: var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  box-shadow: 0 0 0 1px var(--pg-colors-primary, #2563eb) inset;\n}\n.pg-chart-config__gallery-canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n";
//# sourceMappingURL=chart-config.css.d.ts.map