@import 'def';

@mixin text() {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500;
    @include themify($themes) {
        color:themed('txtcolor100') !important;
        fill:themed('txtcolor100') !important;
    }
}

.highcharts-background {
    fill: transparent;
}

.highcharts-axis-line, .highcharts-xaxis-line, .highcharts-tick, .highcharts-grid-line {
    @include themify($themes) {
        stroke:themed('txtcolor3') !important;
    }
}

.highcharts-axis-title,
.highcharts-axis-labels,
.highcharts-yaxis-labels,
.highcharts-xaxis-labels,
.highcharts-title,
.highcharts-legend {
    @include text();

    text {
        @include text();
    }

    tspan {
        @include text();
    }

    span {
        @include text();
    }
}

.no-data {
    text-align: center;
    padding-top: 150px;
}

.highcharts-tooltip {
    @include text();
    .highcharts-label-box {
        @include themify($themes) {
            fill: themed('bodybg') !important;
            stroke: none !important;
        }
    }
    text, tspan {
        @include themify($themes) {
            font-size: 14px;
            color: themed('txtcolor1') !important;
            fill: themed('txtcolor1') !important;
            stroke: none !important;
        }
    }
}

@mixin strokeFill() {
    @include themify($themes) {
        stroke: transparent !important;
        fill:themed('navbg') !important;
    }
}

.highcharts-button, .highcharts-button-box {
    @include strokeFill();
    stroke: transparent !important;
    cursor: default;
    stroke-width: 1px;
    transition: fill 250ms;
}
.highcharts-button text {
    @include text();
}
.highcharts-button-hover {
    transition: fill 0ms;
    @include strokeFill();
}
.highcharts-button-hover text {
    @include text();
}
.highcharts-button-pressed {
    font-weight: bold;
    @include strokeFill();
}
.highcharts-button-pressed text {
    @include text();
    font-weight: bold;
}
.highcharts-button-disabled text {
    @include text();
}
