import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    display: block;

    /*
    Required to allow chart to shrink when used in flexbox or grid layouts
    Otherwise chart canvas is used as minimum content size of component.
    */

    min-width: 0;
    min-height: 0;

    --background-color: var(--flow-ui-chart-background-color, transparent);
    --text-color: var(--flow-ui-chart-text-color, var(--flow-ui-color-neutral-400, #bbb));

    --axis-color: var(--flow-ui-chart-axis-color, var(--flow-ui-color-neutral-400, #bbb));
    --x-axis-color: var(--axis-color);
    --y-axis-color: var(--axis-color);

    --x-axis-tick-color: var(--x-axis-color);
    --y-axis-tick-color: var(--y-axis-color);

    --axis-grid-color: var(--flow-ui-chart-grid-color, var(--flow-ui-color-neutral-200, #eee));
    --x-axis-grid-color: var(--axis-grid-color);
    --y-axis-grid-color: var(--axis-grid-color);

    --axis-label-color: var(--flow-ui-chart-axis-label-color, var(--flow-ui-color-neutral-400, #bbb));
    --x-axis-label-color: var(--axis-label-color);
    --y-axis-label-color: var(--axis-label-color);

    --tick-label-color: var(--flow-ui-chart-tick-label-color, var(--flow-ui-color-neutral-400, #bbb));
    --x-tick-label-color: var(--tick-label-color);
    --y-tick-label-color: var(--tick-label-color);

    --dataset-stroke-color-0: var(--flow-ui-chart-stroke-color-0, hsl(239.6 88.7% 63.8%));
    --dataset-fill-color-0: var(--flow-ui-chart-fill-color-0, hsl(239.6 88.7% 63.8%));

    --dataset-stroke-color-1: var(--flow-ui-chart-stroke-color-1, hsl(24.3 100% 50.5%));
    --dataset-fill-color-1: var(--flow-ui-chart-fill-color-1, hsl(24.3 100% 50.5%));

    --dataset-stroke-color-2: var(--flow-ui-chart-stroke-color-2, hsl(217.8 95.8% 57.4%));
    --dataset-fill-color-2: var(--flow-ui-chart-fill-color-2, hsl(217.8 95.8% 57.4%));

    --dataset-stroke-color-3: var(--flow-ui-chart-stroke-color-3, hsl(44.7 88% 46%));
    --dataset-fill-color-3: var(--flow-ui-chart-fill-color-3, hsl(44.7 88% 46%));

    --dataset-stroke-color-4: var(--flow-ui-chart-stroke-color-4, hsl(199.7 85.9% 47.7%));
    --dataset-fill-color-4: var(--flow-ui-chart-fill-color-4, hsl(199.7 85.9% 47.7%));

    --dataset-stroke-color-5: var(--flow-ui-chart-stroke-color-5, hsl(84.3 74.2% 42.1%));
    --dataset-fill-color-5: var(--flow-ui-chart-fill-color-5, hsl(84.3 74.2% 42.1%));

    --dataset-stroke-color-6: var(--flow-ui-chart-stroke-color-6, hsl(189.4 78.6% 42.6%));
    --dataset-fill-color-6: var(--flow-ui-chart-fill-color-6, hsl(189.4 78.6% 42.6%));

    --dataset-stroke-color-7: var(--flow-ui-chart-stroke-color-7, hsl(141.1 64.9% 43%));
    --dataset-fill-color-7: var(--flow-ui-chart-fill-color-7, hsl(141.1 64.9% 43%));

    --dataset-stroke-color-8: var(--flow-ui-chart-stroke-color-8, hsl(173.1 71% 38.3%));
    --dataset-fill-color-8: var(--flow-ui-chart-fill-color-8, hsl(173.1 71% 38.3%));

    --dataset-stroke-color-9: var(--flow-ui-chart-stroke-color-9, hsl(292.1 88.4% 57.7%));
    --dataset-fill-color-9: var(--flow-ui-chart-fill-color-9, hsl(292.1 88.4% 57.7%));

    --header-padding: var(--flow-ui-chart-header-padding, var(--flow-ui-spacing-x-small));
    --header-height: var(--flow-ui-chart-header-height, var(--flow-ui-control-height-medium));
    --header-font-size: var(--flow-ui-chart-header-font-size, var(--flow-ui-font-size-medium));
    --header-color: var(--flow-ui-chart-header-color, var(--flow-ui-color-text));
  }

  .chart {
    height: 100%;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
  }

  .chart__header {
    flex: 0 0 auto;
    padding: var(--header-padding);
    height: var(--header-height);
    font-size: var(--header-font-size);
    color: var(--header-color);
  }

  .chart_container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
  }
`;

export { styles as default };
