// (C) 2007-2025 GoodData Corporation
@use "sass:color";
@use "variables";
@use "zIndexes";
@use "@gooddata/sdk-ui-kit/styles/scss/Dialog/_variables" as dialog-variables;
@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;

$header-height: 38px;
$dialog-padding: 20px;
$light-color: kit-variables.$gd-color-white;
$border-color: #dde4eb;

$description-width: 220px;
$description-width-mobile: 320px;

.gd-dialog.gd-drill-modal-dialog:not(.gd-dropdown),
.overlay.gd-dialog.gd-drill-modal-dialog:not(.gd-dropdown) {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: 100vw;
    // "(1vw + 1vh - 1vmin)" is substitute for vmax that is unsupported by MSIE11
    width: calc(100vw - 10 * (1vw + 1vh - 1vmin));
    height: calc(100vh - 10 * (1vw + 1vh - 1vmin));
    padding: $dialog-padding;
    background-color: $light-color;

    @media #{kit-variables.$small-only} {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        border-radius: 0;
    }

    &.gd-ff-drill-description {
        overflow-y: hidden;
    }
}

.gd-drill-modal-dialog-header {
    position: relative;
    display: flex;
    overflow: hidden;
    height: $header-height;
    margin: 0 0 $dialog-padding;
    background-color: $light-color;

    .gd-drill-reset-button {
        margin: 0 10px 0 0;
    }

    .gd-drill-title {
        font-weight: 400;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 20px 0 0;
        padding: 4px;
        line-height: 23px;
        white-space: nowrap;
    }

    .gd-drill-close-button {
        top: -5px;
        right: -5px;

        .gd-drill-modal-dialog & {
            position: absolute;
        }
    }

    &.gd-ff-drill-description {
        flex-shrink: 0;
    }
}

.gd-drill-modal-dialog-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    color: var(--gd-palette-complementary-5-from-theme, #b1c1d1);
    margin-top: 20px;
    padding-top: 18px;

    .export-drilled-insight {
        position: relative;

        .export-menu-toggle-button {
            border: none;
            box-shadow: none;
            line-height: 20px;

            &::before {
                top: 8px;
                font-size: 16px;
            }
        }
    }

    .gd-show-as-table-button {
        display: flex;
        gap: 5px;

        path {
            fill: var(--gd-palette-complementary-5-from-theme, #b1c1d1);
        }
    }

    .gd-show-as-table-button:hover {
        path {
            fill: var(--gd-palette-primary-base);
        }
    }
}

.gd-drill-modal-dialog-footer.gd-drill-modal-dialog-footer-with-border {
    border-top: 1px solid dialog-variables.$gd-modal-title-lineColor;
}

.gd-drill-modal-dialog-content {
    background-color: $light-color;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: flex-start;

    .gd-drill-modal-dialog-content-base {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .visualization-uri-root {
        z-index: zIndexes.$drill-dialog-basic;
        position: relative;
        width: 100%;
        height: 100%;

        .headline {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            // override theming
            .headline-primary-item {
                color: kit-variables.$gd-color-dark;
            }

            .headline-secondary-item {
                border-left-color: color.adjust(kit-variables.$default-gd-color-disabled, $alpha: -0.5);
            }

            .headline-compare-section,
            .headline-compare-section-item,
            .headline-value--empty {
                color: kit-variables.$gd-color-state-blank;
            }
        }
    }

    .gd-loading-equalizer-wrap,
    .gd-drill-modal-error {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $light-color;
    }

    .gd-loading-equalizer-wrap {
        z-index: zIndexes.$drill-dialog-loading;

        .gd-loading-equalizer {
            margin: auto 0;
        }
    }

    .gd-drill-modal-error {
        position: absolute;
        z-index: zIndexes.$drill-dialog-error;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .info-label {
        height: auto;
    }

    &.gd-ff-drill-description {
        max-height: 100%;
        flex-shrink: 1;
    }
}

// drill charts are rendered in overlay with modal=true which has 5001+(10 for each open overlay), have tooltips above
// !important is necessary because z-index have been added to the element by Highcharts in
// https://github.com/highcharts/highcharts/commit/48a82ce80ba946839e3a1280e63ca02ab1f88ec0
/* stylelint-disable declaration-no-important */
.highcharts-tooltip-container {
    z-index: zIndexes.$drill-dialog-charts !important;
}

.drill-dialog-insight-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.drill-dialog-insight-container-insight {
    order: 2; // Visually second (right), but first in DOM for accessibility
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px 47px 20px 20px;

    .gd-ui-kit-tooltip__anchor {
        position: absolute;
        top: -10px;
        left: 0;
        z-index: zIndexes.$drill-dialog-description-button;
        transition: all 0.3s ease-in-out;

        // New styles for UiTooltip structure where button is a child
        .drill-dialog-insight-container-button {
            width: 32px;
            height: 32px;
            padding-right: 0;

            span {
                display: block;
                margin: auto;
                text-align: center;
            }

            &:hover span svg path {
                fill: var(--gd-palette-primary-base);
            }

            span svg path {
                fill: var(--gd-palette-complementary-7);
            }

            &.drill-dialog-insight-container-button--open {
                left: 10px;
            }

            &.drill-dialog-insight-container-button--open.drill-dialog-insight-container-button--mobile {
                left: min($description-width-mobile + 10px, calc(100vw - 72px));
            }
        }
    }
}

.drill-dialog-insight-container-description {
    order: 1;
    width: 0;
    margin-top: -20px;
    height: calc(100% + 40px);
    flex-shrink: 0;
    overflow: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: width 0.3s ease-in-out;
    position: relative;

    &:not(.drill-dialog-insight-container-description--open)
        .drill-dialog-insight-container-description-content {
        display: none;
    }

    &.drill-dialog-insight-container-description--open {
        border-right: 1px solid var(--gd-palette-complementary-3);
        width: $description-width;

        .drill-dialog-insight-container-description-content {
            width: $description-width;
        }
    }

    &.drill-dialog-insight-container-description--open.drill-dialog-insight-container-description--mobile {
        width: $description-width-mobile;
        max-width: calc(100vw - 82px);

        .drill-dialog-insight-container-description-content {
            width: $description-width-mobile;
            max-width: calc(100vw - 82px);
        }
    }

    &.drill-dialog-insight-container-description--mobile {
        margin-top: 0;
        height: auto;
        background: var(--gd-palette-complementary-0);
        position: absolute;
        top: -20px;
        left: 0;
        bottom: -20px;
        z-index: zIndexes.$drill-dialog-description;
    }

    .drill-dialog-insight-container-description-content {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;

        .gd-rich-text-content {
            padding: 15px;
        }
    }
}

.gd-drill-dialog-export .gd-ui-kit-tooltip__anchor {
    width: 100%;
}