import { css, cssManager } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../00theme.js';

export const echartsBaseStyles = [
  themeDefaultStyles,
  cssManager.defaultStyles,
  css`
    :host {
      display: block;
      height: 400px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      color: var(--dees-color-text-primary);
      font-size: 14px;
    }
    dees-tile {
      height: 100%;
    }
    .chartHeader {
      display: flex;
      align-items: center;
      height: 32px;
      padding: 0 8px 0 16px;
    }
    .chartLabel {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--dees-color-text-secondary);
    }
    .chartContainer {
      position: absolute;
      inset: 0;
    }
  `,
];