// (C) 2007-2025 GoodData Corporation
@use "sass:meta";
@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
@use "@gooddata/sdk-ui-vis-commons/styles/scss/legend";
@use "tooltip";

.viz-line-family-chart-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    background-color: kit-variables.$gd-chart-background;

    &.flex-direction-row {
        flex-direction: row;
    }

    &.flex-direction-column {
        flex-direction: column;
    }

    &.non-responsive-legend {
        .viz-react-highchart-wrap {
            // Hack for Safari, so highchart won't overflow
            min-height: 0;
        }
    }
}

.viz-react-highchart-wrap {
    // stylelint-disable-next-line declaration-no-important
    overflow: hidden !important; // overrides inline style which comes from I dont know where
    height: 100%;
    min-width: 0; // Hack for FF, so flexbox can shrink
}

.highcharts-container {
    // Without position: static, there is a sizing issue in Safari (in Dashboard component)
    // stylelint-disable-next-line declaration-no-important
    position: static !important;
    // If the outer container have scroll bar, the chart can be showed by scrolling.
    // stylelint-disable-next-line declaration-no-important
    overflow: visible !important;

    // This makes highcharts resizable and shrinkable!
    // stylelint-disable-next-line declaration-no-important
    width: 100% !important;

    svg {
        // stylelint-disable-next-line declaration-no-important
        width: 100% !important;
    }
}

.highcharts-drilldown-axis-label {
    &:hover {
        // stylelint-disable-next-line declaration-no-important
        text-decoration: underline !important; // Override Highcharts inline style
    }
    // stylelint-disable declaration-no-important
    .gd-axis-label-drilling-disabled & {
        // TODO: Drilling
        color: kit-variables.$gd-color-state-blank !important;
        fill: kit-variables.$gd-color-state-blank !important;
        pointer-events: none;
        text-decoration: none !important; // Override Highcharts inline style
        font-weight: normal !important; // Override Highcharts inline style
    }
    @media (forced-colors: active) {
        .gd-axis-label-drilling-disabled & {
            color: canvastext !important;
            fill: canvastext !important;
        }
    }
    // stylelint-enable
}

.hidden-empty-series {
    display: none;
}

.gd-bubble-trigger-zoom-out {
    position: absolute;
    top: -85px;
    right: 30px;

    @media only screen and (max-width: 640px) {
        top: -73px;
    }

    .viz-zoom-out {
        position: relative;
        top: 0;
        right: 0;
        width: 36px;
        height: 36px;
    }
}

.gd-contrast-label,
.gd-contrast-label text {
    fill: var(--gd-chart-dataLabel-autoDarkTextColor, var(--gd-palette-complementary-9, #000));
}

.gd-chart-forecasting {
    position: absolute;
    top: 0;
    bottom: 0;
}

.gd-chart-forecasting-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}