@use 'sass:math';


@mixin vap_transition($delay:0s) {
    transition-delay:$delay;
    transition-duration:0.5s;
    transition-property:all;
    transition-timing-function:linear;
}

$max_vap_fontsize:1em;
$max_vap_height:$max_vap_fontsize * 1.75;

// todo merge with value_and_prediction_summary ?
.value_and_prediction_set_summary {
    @include vap_transition();
    font-size:$max_vap_fontsize;
    display: flex;

    .value_and_prediction {
        @include vap_transition();
        max-height: $max_vap_height;
        min-height: 0;
        font-size: $max_vap_fontsize;
        line-height: $max_vap_height;
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 10;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        &.prob-0
        {
            padding: 0;
        }

        // Can we remove this?
        &:before {
            content:"";
            position:absolute;
            top:0; right:0; bottom:0; left:0;

            // Added to allow user to click on the AltRoute Icon representing an applied counterfactual
            pointer-events: none;
        }

        // When there are many judgement badges, allow them to wrap
        .node_judgements_container
        {
            flex-wrap: wrap;
            display: flex;
            justify-content: center;
        }
    }

    .value_and_prediction:nth-child(even)
    {
        background-color: rgb(230, 230, 230);
        &.warning_color
        {
            background-color: rgb(253, 170, 119);
        }
    }
    .value_and_prediction:nth-child(odd)
    {
        background-color: rgb(240, 240, 240);
        &.warning_color
        {
            background-color: rgb(255, 181, 136);
        }
    }


    &:hover {
        .value_and_prediction {
            max-height: initial !important;
            min-height: initial !important;
            font-size: inherit !important;
            overflow: visible;
        }
    }
}