// (C) 2007-2024 GoodData Corporation
@use "sass:map";
@use "variables";
@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;

$kpi-loading-fade-time: 0.3s;
$pop-height: 53px;
$kpi-min-height: variables.$item-min-height - 2 *
    (variables.$item-inner-padding + variables.$item-outer-padding + variables.$item-border);
$kpi-with-pop-min-height: $kpi-min-height + $pop-height;

.kpi {
    min-height: $kpi-min-height;
    text-align: center;

    &.kpi-with-pop {
        min-height: $kpi-with-pop-min-height;

        @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
            min-height: $kpi-with-pop-min-height - 5;
        }
    }

    .gd-kpi-widget-content {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .kpi-value,
    h3 {
        transition: color 0.4s;
    }

    &.content-loading {
        .kpi-value,
        h3 {
            color: kit-variables.$gd-color-disabled;
        }

        .kpi-link {
            width: 100%;
        }
    }

    .kpi-animation-leave {
        opacity: 1;
        transition: none;
    }

    .kpi-animation-leave-active {
        opacity: 0;
        transition: opacity $kpi-loading-fade-time;
    }

    .kpi-animation-enter {
        opacity: 0;
        transition: none;
    }

    .kpi-animation-enter-active {
        opacity: 1;
        transition: opacity $kpi-loading-fade-time;
    }
}

.kpi-link {
    display: inline-block;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
    }

    &:hover {
        color: var(
            --gd-dashboards-content-kpiWidget-kpi-primaryMeasureColor-from-theme,
            kit-variables.$gd-color-text
        );
        opacity: 0.6;
    }

    &:focus {
        .kpi-value {
            color: variables.$gd-kpi-primaryMeasureColor;
        }
    }

    .kpi-value {
        .kpi-value-value {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                display: block;
            }
        }

        .kpi-link-style-underline::after {
            border-bottom: 2px solid
                var(
                    --gd-dashboards-content-kpiWidget-kpi-primaryMeasureColor,
                    var(--gd-palette-complementary-9-from-theme, kit-variables.$default-gd-color-link)
                );
        }

        &.is-empty-value {
            .kpi-value-value::after {
                border-bottom: none;
            }
        }
    }
}

.kpi-value {
    position: relative;

    $value-height: 60px;

    font-weight: map.get(map.get(kit-variables.$gd-typo, font-weights), bold);
    font-family: kit-variables.$gd-font-primary;
    height: $value-height;
    font-size: 50px;
    line-height: $value-height;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(
        --gd-dashboards-content-kpiWidget-kpi-primaryMeasureColor-from-theme,
        kit-variables.$gd-color-dark
    );

    &.is-smallest-height {
        margin: 0;
    }

    &.is-empty-value,
    &.is-error-value {
        color: var(
            --gd-dashboards-content-kpiWidget-kpi-secondaryInfoColor,
            kit-variables.$gd-color-state-blank
        );
    }

    &.kpi-value-resize {
        margin: 0;
    }
}

.is-kpi-positive {
    color: kit-variables.$gd-color-positive;
}

.is-kpi-negative {
    color: kit-variables.$gd-color-negative;
}

.gd-kpi-trend-icon {
    margin-right: 5px;
    font-size: inherit;
}

.visualization-content {
    position: relative;
    flex: 1 1 auto;
}