// (C) 2025 GoodData Corporation

@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;

@keyframes gd-kda-dialog-enter-minimized {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gd-kda-dialog-enter-expanded {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gd-kda-success-enter {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    60% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.gd-kda-dialog {
    width: 948px;
    height: 704px;
    //stylelint-disable-next-line
    max-width: none !important;
    transform-origin: top center;

    // Override sdk-ui-kit default dialog styles for minimized floating status bar.
    &.gd-kda-dialog--minimized {
        &#{&} {
            width: 326px;
            height: 35px;
            padding: 4px 5px 4px 10px;
            border-radius: 4px;
            border-width: 1px;
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
            animation: gd-kda-dialog-enter-minimized 200ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both;
        }

        &#{&}--done {
            background: var(--gd-toastMessage-success-backgroundColor);
            border-color: var(--gd-toastMessage-success-borderColor);
            color: var(--gd-toastMessage-success-textColor);
        }

        &#{&}--error {
            background: var(--gd-toastMessage-error-backgroundColor);
            border-color: var(--gd-toastMessage-error-borderColor);
            color: var(--gd-toastMessage-error-textColor);
        }

        &#{&}--step1,
        &#{&}--step2 {
            border-color: var(--gd-palette-complementary-3);
        }
    }

    // Align expanded dialog actions with the header title row.
    &.gd-kda-dialog--expanded {
        &#{&} {
            animation: gd-kda-dialog-enter-expanded 200ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both;

            .gd-kda-dialog-controls {
                top: 20px;
            }
        }
    }

    .gd-kda-dialog-controls {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .gd-kda-dialog-action-buttons {
        display: flex;
        align-items: center;

        &__button {
            display: flex;
            cursor: pointer;

            &__open {
                margin-right: 7px;
            }
        }

        &__divider {
            width: 1px;
            background-color: var(--gd-palette-complementary-3);

            &.done,
            &.error {
                background-color: var(--gd-palette-complementary-0-t70);
            }
        }

        &--size-small {
            gap: 3px;

            .gd-ui-kit-icon-button {
                width: 22px;
                height: 22px;

                svg {
                    width: 14px;
                    height: 14px;
                }
            }

            .gd-kda-dialog-action-buttons__divider {
                height: 17px;
            }
        }

        &--size-medium {
            gap: 5px;

            .gd-kda-dialog-action-buttons__divider {
                height: 32px;
            }
        }
    }

    .gd-kda-floating-status-bar {
        display: flex;
        gap: 10px;
        align-items: center;
        height: 100%;

        &__content {
            display: flex;
            flex: 1 0 0;
            gap: 5px;
            align-items: center;
            min-width: 0;

            // Play a short transition when the success icon appears (status transitions to `done`).
            // This relies on the icon being conditionally mounted only in the `done` state.
            .gd-ui-kit-icon--color-success {
                animation: gd-kda-success-enter 250ms cubic-bezier(0.22, 1, 0.36, 1);
                transform-origin: center;
            }
        }

        &__spinner {
            display: flex;
        }

        &__text {
            flex: 1 0 0;
            min-width: 0;
            margin: 0;
            color: var(--gd-palette-complementary-7);
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 17px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    &.gd-kda-dialog--minimized--done,
    &.gd-kda-dialog--minimized--error {
        .gd-kda-floating-status-bar {
            &__text {
                color: var(--gd-palette-complementary-0);
                font-weight: 700;
            }
        }
    }

    //dialog sections - structure
    .gd-kda-dialog-sections {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        &-header {
            flex: 0 0 auto;
        }

        &-content {
            flex: 1 1 auto;
            overflow: hidden;
            margin: -20px;
            padding: 20px;
            background: var(--gd-palette-complementary-0-from-theme, #fcfcfd);
        }

        &-footer {
            flex: 0 0 auto;
        }

        &-divider {
            height: 0;
            border-bottom: 1px solid var(--gd-palette-complementary-2);
            margin: 20px -20px;
        }
    }

    //dialog header
    .gd-kda-dialog-header {
        display: flex;
        flex-direction: column;
        gap: 10px;

        &-title {
            display: flex;
            padding: 3px 0;
            justify-content: flex-start;
            align-items: center;
            gap: 10px;

            &-text {
                color: var(--gd-palette-complementary-8);
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: 26px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 60px;
            }
        }

        &-bars {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            align-self: stretch;
        }
    }

    //dialog bart
    .gd-kda-dialog-bar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2px;

        &-title {
            color: var(--gd-palette-complementary-6);
            font-size: 11px;
            font-style: normal;
            font-weight: 700;
            line-height: 21px;
            text-transform: uppercase;
        }

        &-content {
            flex-wrap: wrap;
            display: flex;
            gap: 5px;
        }

        &__metric {
            display: flex;
            max-width: 320px;

            svg.gd-ui-kit-icon {
                fill: kit-variables.$gd-color-object-type-metric;
            }
        }

        &__date {
            display: flex;
            max-width: 320px;
        }

        &__attribute {
            display: flex;
            max-width: 320px;
        }
    }

    //attribute add dropdown
    .gd-kda-attribute-add-dropdown {
        & > div {
            margin: 0;
        }
    }

    //dialog footer
    .gd-kda-dialog-footer {
        display: flex;
        flex-direction: row;

        &-content {
            flex: 1 1 auto;
            display: flex;
        }

        &-buttons {
            flex: 0 0 auto;
            display: flex;
        }
    }

    //dialog content
    .gd-kda-dialog-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        gap: 20px;

        &-full {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        &-left-panel {
            flex: 0 0 250px;
            max-width: 250px;
        }

        &-divider {
            width: 0;
            border-right: 1px solid var(--gd-palette-complementary-2);
        }

        &-right-panel {
            flex: 1 1 auto;
            overflow: hidden;
        }
    }

    //key drivers panel
    .gd-kda-key-drivers-panel {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        &-title {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--gd-palette-complementary-7);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
        }

        &-trend {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-top: 5px;

            button {
                justify-content: flex-end;
                width: 100%;

                --gd-icon-fill-color: var(--gd-palette-complementary-6);

                .gd-ui-kit-button__text {
                    flex-grow: 1;
                    text-align: left;
                    color: var(--gd-palette-complementary-7);
                }

                .gd-ui-kit-button__badge {
                    color: var(--gd-palette-complementary-6);
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                }
            }
        }

        &-list {
            margin-top: 20px;
            overflow: hidden;
            margin-right: -20px;
            position: relative;

            &.empty::before,
            &.empty::after {
                display: none;
            }

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                height: 3px;
                z-index: 1;
                width: 250px;
                border-top: 1px solid var(--gd-palette-complementary-3);
                border-left: 1px solid var(--gd-palette-complementary-3);
                border-right: 1px solid var(--gd-palette-complementary-3);
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }

            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                height: 3px;
                z-index: 1;
                width: 250px;
                border-bottom: 1px solid var(--gd-palette-complementary-3);
                border-left: 1px solid var(--gd-palette-complementary-3);
                border-right: 1px solid var(--gd-palette-complementary-3);
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
            }

            .gd-ui-kit-listbox {
                margin: 0;
                padding: 0;
                max-height: 100%;
                height: 100%;

                &::-webkit-scrollbar {
                    -webkit-appearance: none;
                    appearance: none;
                    width: 10px;
                }

                &::-webkit-scrollbar-thumb {
                    background-color: var(--gd-palette-complementary-7);
                    border: 2px solid transparent;
                    border-radius: 5px;
                    background-clip: padding-box;
                }

                &:hover::-webkit-scrollbar-thumb:hover {
                    border: 0;
                    background-color: var(--gd-palette-complementary-5);
                }

                li .gd-kda-item {
                    border-bottom: 1px solid var(--gd-palette-complementary-3);
                }
                li:first-child .gd-kda-item {
                    border-top-left-radius: 3px;
                    border-top-right-radius: 3px;
                }
                li:last-child .gd-kda-item {
                    border-bottom-left-radius: 3px;
                    border-bottom-right-radius: 3px;
                    border-bottom: transparent;
                }

                ul:focus-visible .gd-kda-item.gd-kda-item-focused {
                    background-color: var(--gd-palette-complementary-2);
                    outline-offset: -2px;
                    outline: 2px solid -webkit-focus-ring-color;
                }
            }

            &-loading {
                display: flex;
                gap: 10px;
                flex-direction: column;
                margin-right: 20px;
            }

            &-empty {
                display: flex;
                padding: 40px 10px;
                gap: 10px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                color: var(--gd-palette-complementary-6);
            }
        }
    }

    //key driver item
    .gd-kda-item {
        position: relative;
        display: flex;
        width: 250px;
        padding: 10px 15px;
        align-items: center;
        height: 60px;
        gap: 5px;

        cursor: pointer;
        background: var(--gd-palette-complementary-0);
        border-left: 1px solid var(--gd-palette-complementary-3);
        border-right: 1px solid var(--gd-palette-complementary-3);

        &-text {
            flex: 1 1 auto;
            font-size: 12px;
            font-style: normal;
            line-height: 16px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            flex-direction: column;

            &-title {
                color: var(--gd-palette-complementary-7);
                font-weight: 400;
            }

            &-category {
                color: var(--gd-palette-complementary-8);
                font-weight: 700;
            }
        }

        &-value {
            flex: 0 0 auto;
            color: var(--gd-palette-complementary-8);
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px;
            text-align: right;
        }

        &-progress {
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: 10px;
            height: 3px;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: var(--kda-item-width);
                background: linear-gradient(
                    90deg,
                    var(--gd-palette-primary-base-t70) 0%,
                    var(--gd-palette-primary-base) 100%
                );
            }
        }

        &.gd-kda-item-selected {
            background-color: var(--gd-palette-complementary-1);

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 4px;
                background-color: var(--gd-palette-primary-base);
            }
        }

        &:hover {
            background-color: var(--gd-palette-complementary-1);

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 4px;
                background-color: var(--gd-palette-complementary-3);
            }
        }

        &.gd-kda-item-selected:hover {
            background-color: var(--gd-palette-primary-dimmed);

            &::before {
                background-color: var(--gd-palette-primary-base);
            }
        }
    }

    //key drivers overview
    .gd-kda-key-drivers-overview {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex: 1 0 0;
        align-self: stretch;
        height: 100%;

        &-title {
            color: var(--gd-palette-complementary-8);
            text-align: left;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 26px;
        }

        &-headline {
            display: flex;
        }

        &-drivers {
            display: flex;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    }

    //key drivers detail
    .gd-kda-key-drivers-detail {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex: 1 0 0;
        align-self: stretch;
        height: 100%;

        &-head {
            width: 100%;
        }

        &-title {
            color: var(--gd-palette-complementary-8);
            text-align: left;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 26px;
            margin-left: 5px;
        }

        &-breadcrumb {
            margin-bottom: 8px;
            width: 100%;
        }

        &-visualisation {
            width: 100%;
            display: flex;
            flex: 1 1 auto;
        }

        &-visualisation-container {
            width: 100%;
            height: 100%;

            rect.highcharts-background {
                fill: var(--gd-palette-complementary-0-from-theme, #fcfcfd);
            }
        }

        &-info {
            color: var(--gd-palette-complementary-7);
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 17px;
        }
    }

    //key driver headline
    .gd-kda-key-driver-headline {
        gap: 20px;
        display: flex;
        align-items: flex-start;
        align-self: stretch;
    }

    //key driver headline
    .gd-kda-headline {
        //date, diff
        &-date,
        &-diff {
            color: var(--gd-palette-complementary-8);
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 5px;
        }
    }

    //key driver summary drivers
    .gd-kda-key-drivers-summary {
        gap: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        width: 100%;
        flex: 1 1 auto;

        &-title {
            flex: 0 0 auto;
            color: var(--gd-palette-complementary-8);
            font-size: 17px;
            font-style: normal;
            font-weight: 700;
            line-height: 23px;
        }

        &-info {
            flex: 0 0 auto;
            display: flex;
            padding: 10px;
            align-items: center;
            gap: 20px;
            align-self: stretch;
            justify-content: space-between;
            border-radius: 3px;
            background: color-mix(in sRGB, var(--gd-palette-complementary-5) 10%, transparent);

            &-text {
                color: var(--gd-palette-complementary-7);
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 23px;
            }
        }

        &-list {
            flex: 1 1 auto;
            width: 100%;
            overflow: hidden;

            .gd-ui-kit-async-table__header:focus-visible {
                outline-offset: -2px;
                outline: 2px solid -webkit-focus-ring-color;
            }
        }
    }

    //attributes dropdown
    .gd-kda-attributes-dropdown {
        display: inline-flex;
    }

    //error component
    .gd-kda-dialog-error {
        display: flex;
        flex-direction: column;
        max-width: 460px;
        gap: 0;

        &-trace-id {
            color: var(--gd-palette-complementary-6);
            text-align: center;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            display: flex;
            align-items: center;
            justify-content: center;

            &-name {
                text-decoration: underline;
                text-decoration-style: dashed;
            }
        }

        &-details-show {
            margin-top: 0;
            display: flex;
            flex-direction: column;

            &-content {
                margin-top: 15px;
                margin-bottom: 15px;
                display: flex;
                flex-direction: column;
                height: 233px;
                padding-top: 5px;
                align-items: flex-start;
                align-self: stretch;
                border-radius: 3px;
                border: 1px solid var(--gd-palette-complementary-3);
            }

            &-content-title {
                display: flex;
                padding: 0 10px;
                align-items: center;
                gap: 5px;
                align-self: stretch;
                flex-grow: 0;
            }

            &-content-title-text {
                flex: 1 0 0;
                color: var(--gd-palette-complementary-6);
                font-feature-settings:
                    "liga" off,
                    "clig" off;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 23px; /* 164.286% */
            }

            &-content-description {
                display: flex;
                padding: 10px;
                align-items: flex-start;
                gap: 10px;
                align-self: stretch;
                border-radius: 0 0 3px 3px;
                border-top: 1px solid var(--gd-palette-complementary-3);
                background: var(--gray-100-fcfcfd-com-0, #fcfcfd);
                margin: 0;
                color: var(--gd-palette-complementary-7);
                font-family: "Andale Mono", serif;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                overflow: auto;
                overscroll-behavior: contain;
                white-space: normal;
                word-break: break-word;
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .gd-kda-dialog {
        &#{&} {
            transition: none;
            animation: none;
        }
    }

    .gd-kda-floating-status-bar__content {
        .gd-ui-kit-icon--color-success {
            animation: none;
        }
    }
}

//date select in popover
.gd-kda-dialog-bar__date-select {
    margin-top: -10px;
    margin-bottom: -10px;
    margin-left: -10px;
    width: calc(100% + 20px);
}

//attributes dropdown header
.gd-kda-attributes-dropdown__header {
    color: var(--gd-palette-complementary-6);
    background: var(--gd-palette-complementary-2);
    display: flex;
    padding: 10px;
    align-items: flex-start;
    align-self: stretch;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

//attributes dropdown no search
.gd-kda-attributes-dropdown__no-search {
    display: flex;
    margin-top: 6px;
}

.gd-kda-attributes-dropdown__subheader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 10px;
    font-size: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
    color: var(--gd-palette-complementary-6);

    .gd-kda-attributes-dropdown__subheader__attribute {
        flex: 1 1 auto;
    }

    .gd-kda-attributes-dropdown__subheader__key_drivers {
        flex: 0 0 auto;
    }
}

.gd-kda-attributes-dropdown__body {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 260px;
}

.gd-kda-attributes-dropdown__actions-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px;
}

.gd-kda-attributes-select-item__right {
    flex: 0 0 auto;
    min-width: 35px;
    margin-left: 5px;
    text-align: right;
}

.gd-kda-attributes-dropdown__key_drivers {
    font-weight: bold;
    color: var(--gd-palette-complementary-7);
}

.gd-kda-attributes-select .gd-ui-kit-paged-virtual-list__scroll-container {
    padding-right: 7px;
}

.gd-kda-trend-item {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 5px 10px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    cursor: pointer;

    .gd-kda-trend-item-text {
        flex-grow: 1;
        text-align: left;
        color: var(--gd-palette-complementary-7);
    }

    .gd-kda-trend-item-drivers {
        color: var(--gd-palette-complementary-6);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    //selected states
    &.gd-kda-trend-item-selected {
        .gd-kda-trend-item-text,
        .gd-kda-trend-item-drivers {
            color: var(--gd-palette-primary-base);
        }
    }

    //selected states
    &.gd-kda-trend-item-focused {
        background-color: var(--gd-palette-complementary-2);
    }

    &:hover,
    &.gd-kda-trend-item-focused:not(.gd-kda-trend-item-selected) {
        background-color: var(--gd-palette-complementary-2);

        .gd-kda-trend-item-text,
        .gd-kda-trend-item-drivers {
            color: var(--gd-palette-complementary-8);
        }
    }

    &.gd-kda-trend-item-selected:hover {
        .gd-kda-trend-item-text,
        .gd-kda-trend-item-drivers {
            color: var(--gd-palette-primary-base);
        }
    }

    &.gd-kda-trend-item-disabled {
        cursor: default;

        .gd-kda-trend-item-text,
        .gd-kda-trend-item-drivers {
            color: var(--gd-palette-complementary-5);
        }

        &:hover {
            background-color: transparent;

            .gd-kda-trend-item-text,
            .gd-kda-trend-item-drivers {
                color: var(--gd-palette-complementary-5);
            }
        }
    }
}

//kda dialog is over drill modal
/* stylelint-disable declaration-no-important */
body.gd-kda-dialog-opened .highcharts-tooltip-container {
    z-index: 6111 !important;
}