@import '~@gravity-ui/uikit/styles/mixins';
@import '../../../libs/DatalensChartkit/ChartKit/theme';
@import './../../../styles/mixins.scss';

// z-index value that doesn't overlap the chartkit menu's popup
$fullscreenZIndex: 999;

.dl-widget {
    --dl-dk-charts-padding: 0px;
    --dl-dk-table-padding: 16px;
    --dl-dk-metric-padding: 0px;
    --dl-dk-map-padding: 0px;
    --dl-dk-header-offset: 16px;
    --dl-dk-charts-tabs-height: 44px;
    --dl-dk-charts-desc-padding: 8px;
    --dl-dk-metric-desc-padding: 8px;
    --dl-dk-map-desc-padding: 8px;
    --dl-dk-table-desc-padding: 16px;
    @include yc-chartkit-theme-common;

    $class: &;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0;
    padding: 0;
    border-radius: var(--dl-dk-charts-border-radius, 3px);
    border: none;
    // fix for cases of chart with display: fixed style
    filter: opacity(1);

    &_fullscreen {
        position: fixed;
        width: 100vw;
        height: 100dvh;
        left: 0;
        top: var(--fullscreen-widget-top, 0);
        background-color: var(--g-color-base-float);
        z-index: $fullscreenZIndex;
        transform: translateY(var(--fullscreen-widget-transform-y, 0));
    }

    &__description {
        display: flex;
        overflow: auto;
        padding: 0 var(--dl-dk-charts-desc-padding) var(--dl-dk-charts-desc-padding);
    }

    &__author {
        @include text-body-2();
        color: var(--g-color-text-secondary);
        padding: 0 var(--dl-dk-charts-desc-padding) var(--dl-dk-charts-desc-padding);
        margin-left: auto;

        .g-link:not(:hover) {
            color: var(--g-color-text-secondary);
        }
    }

    .chartkit {
        overflow: visible;
        min-height: 0;
    }

    &__container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1;
        height: 100%;
        width: 100%;
    }

    &__chart-header {
        z-index: 2;
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
    }

    &__body {
        display: flex;
        flex-direction: column;
        height: 100%;
        position: absolute;
        width: 100%;
        top: 0;

        &_hidden {
            opacity: 0;
            z-index: -1;
        }

        &_d3 {
            overflow: hidden;
        }
    }

    &__description {
        display: flex;
        align-items: center;
        overflow: auto;
        padding: 0 var(--dl-dk-charts-desc-padding) var(--dl-dk-charts-desc-padding);
    }

    &__body_metric2 + &__description {
        padding: 0 var(--dl-dk-metric-desc-padding) var(--dl-dk-metric-desc-padding);
    }

    &__body_markup + &__description {
        padding: 0 var(--dl-dk-metric-desc-padding) var(--dl-dk-metric-desc-padding);
    }

    &__body_ymap + &__description {
        padding: 0 var(--dl-dk-map-desc-padding) var(--dl-dk-map-desc-padding);
    }

    &__body_table + &__description {
        padding: 0 var(--dl-dk-table-desc-padding) var(--dl-dk-table-desc-padding);
    }

    // block below up to no_tabs: with tabs, maps and metrics
    & .chartkit-loader__loader_compact {
        right: 0;
        top: 0;
    }

    & .chartkit-loader.chartkit-loader_widget .chartkit-loader__loader_compact {
        right: 10px;
        top: 7px;
    }

    // for widgets-metrics indentation should be different
    #{$class}__body {
        padding: 0 var(--dl-dk-charts-padding) var(--dl-dk-charts-padding);

        // with tabs, not maps and not metrics

        & .chartkit-base__header {
            right: calc(-1 * var(--dl-dk-charts-padding) + var(--dl-dk-header-offset));
            top: calc(-1 * var(--dl-dk-charts-tabs-height) + var(--dl-dk-header-offset));
        }

        & .chartkit-loader__loader_compact:not(.chartkit-loader_widget) {
            right: calc(-1 * var(--dl-dk-charts-padding));
            top: -44px;
        }
    }

    #{$class}__body_table {
        .chartkit-base__header {
            right: calc(-1 * var(--dl-dk-table-padding) + var(--dl-dk-header-offset));
        }
    }

    #{$class}__body_metric2 {
        padding: calc(var(--dl-dk-metric-padding) / 2) var(--dl-dk-metric-padding);

        .chartkit-base__header {
            right: calc(-1 * var(--dl-dk-metric-padding) + var(--dl-dk-header-offset));
        }
    }

    #{$class}__body_markup {
        padding: calc(var(--dl-dk-metric-padding) / 2) var(--dl-dk-metric-padding);

        .chartkit-base__header {
            right: calc(-1 * var(--dl-dk-metric-padding) + var(--dl-dk-header-offset));
        }
    }

    #{$class}__body_ymap {
        padding: 0;

        .chartkit-base__header {
            right: calc(-1 * var(--dl-dk-map-padding) + var(--dl-dk-header-offset));
        }
    }

    & .chartkit-error {
        padding: 16px;
    }

    & .chartkit {
        --highcharts-series-border: var(--g-color-base-float);

        .gcharts-chart {
            --gcharts-data-labels: var(--g-color-text-complementary);
        }
    }

    &_default-mobile {
        #{$class}__container {
            position: static;
        }
    }

    &_no-tabs {
        // On mobile devices to trigger intersection observer we need at least 1px of height
        &#{$class}_wait-for-init {
            opacity: 0;
            min-height: 1px;
        }

        .chartkit {
            min-height: 40px;
        }

        // block below: without tabs, maps and metrics

        .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
            top: -2px;
        }

        // no tabs, no maps, no metrics

        #{$class}__container {
            padding-top: var(--dl-dk-charts-padding);

            .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
                top: calc(-1 * var(--dl-dk-charts-padding));
            }
        }

        #{$class}__container_table {
            padding-top: var(--dl-dk-table-padding);
        }

        #{$class}__container_metric2 {
            padding: calc(var(--dl-dk-metric-padding) / 2) var(--dl-dk-metric-padding);
        }

        #{$class}__container_markup {
            padding: calc(var(--dl-dk-metric-padding) / 2) var(--dl-dk-metric-padding);
        }

        #{$class}__container_ymap {
            padding: 0;
        }
    }

    & .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
        top: -35px;
        right: 35px;
    }
    &__container_table
        .chartkit-loader:not(.chartkit-loader_widget)
        .chartkit-loader__loader_compact {
        top: -46px;
        right: 12px;
    }
    &_no-controls .chartkit-loader:not(.chartkit-loader_widget) .chartkit-loader__loader_compact {
        right: 15px;
    }
}
