@import '../base/states';
@import '../popup/theme';
@import './layout';

$chart-inactive: $disabled-border-color !default;
$chart-major-lines: rgba(0, 0, 0, .08) !default;
$chart-minor-lines: rgba(0, 0, 0, .08) !default;

$chart-area-opacity: .8 !default;

$chart-crosshair-background: rgba(0, 0, 0, .5) !default;
$chart-crosshair-shared-tooltip-color: $normal-text-color !default;
$chart-crosshair-shared-tooltip-background: $base !default;
$chart-crosshair-shared-tooltip-border: rgba(0, 0, 0, .08) !default;

$chart-notes-background: rgba(0, 0, 0, .5) !default;
$chart-notes-border: rgba(0, 0, 0, .5) !default;
$chart-notes-lines: rgba(0, 0, 0, .5) !default;

$error-bars-background: rgba(0, 0, 0, .5) !default;

$chart-selection-background: rgba(255, 255, 255, .01);
$chart-selection-marque-background: $series-a !default;

$selection-handle-background: $background !default;
$selection-handle-gradient: linear-gradient($base, darken($base, 2%)) !default;
$selection-border-color: rgba(0, 0, 0, .08) !default;
$selection-box-shadow: inset 0 1px 7px rgba(0, 0, 0, .15) !default;

@include exports('charts/theme') {
    // Exported variables
    .k-var--chart-inactive {
        background-color: $chart-inactive;
    }

    .k-var--chart-major-lines {
        background-color: $chart-major-lines;
    }

    .k-var--chart-minor-lines {
        background-color: $chart-minor-lines;
    }

    .k-var--chart-area-opacity {
        opacity: $chart-area-opacity;
    }

    .k-var--chart-notes-background {
        background-color: $chart-notes-background;
    }

    .k-var--chart-notes-border {
        background-color: $chart-notes-border;
    }

    .k-var--chart-notes-lines {
        background-color: $chart-notes-lines;
    }

    .k-var--chart-crosshair-background {
        background-color: $chart-crosshair-background;
    }

    .k-var--chart-error-bars-background {
        background-color: $error-bars-background;
    }

    // Elements
    .k-chart,
    .k-sparkline,
    .k-stockchart {
        background-color: transparent;
    }

    .k-chart-tooltip {
        color: $background;
        border-radius: $border-radius;
    }

    .k-chart-tooltip-inverse {
        color: invert($background);
    }

    .k-chart-crosshair-tooltip,
    .k-chart-shared-tooltip {
        color: $chart-crosshair-shared-tooltip-color;
        background-color: $chart-crosshair-shared-tooltip-background;
        border-color: $chart-crosshair-shared-tooltip-border;
    }

    .k-selection {
        border-color: $selection-border-color;
        box-shadow: $selection-box-shadow;
    }

    .k-selection-bg {
        background-color: transparent;
    }

    .k-handle {
        background-color: $selection-handle-background;
        background-image: $selection-handle-gradient;
        cursor: e-resize;
        border-color: $selection-border-color;
    }

    .k-handle div {
        background-color: $chart-selection-background;
    }

    .k-mask {
        background-color: $background;
        opacity: .8;
    }

    .k-border {
        background: $disabled-border-color;
    }

    .k-marquee-color {
        background-color: $chart-selection-marque-background;
    }

    .k-marquee-color {
        opacity: .6;
    }

    // Navigator hint
    .k-navigator-hint .k-scroll {
        border-radius: $border-radius;
        background: $disabled-border-color;
    }

    .k-navigator-hint .k-tooltip {
        border: 0;
        background: $background;
    }
}