@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/functions" as functions;
@use "bulma/sass/elements/progress" as progress;

$progress-value-color: progress.$progress-value-background-color;
$progress-value-color-invert: functions.bulmaFindColorInvert($progress-value-color);

.#{iv.$class-prefix}progress-wrapper {

    @include cv.register-vars(
        (
            "progress-value-color": #{$progress-value-color},
            "progress-value-color-invert": #{$progress-value-color-invert}
        )
    );

    .progress, .progress-bar {
    
        @each $name, $pair in progress.$progress-colors {
            &.is-#{$name} {
                @include cv.register-vars(
                (
                    "progress-value-color": #{cv.getVar($name)},
                    "progress-value-background-color": #{cv.getVar($name)}
                )
                );
                &.is-more-than-half {
                    +.progress-value {
                        @include cv.register-vars(
                        (
                            "progress-value-color": #{cv.getVar($name, "", "-invert")}
                        )
                        );
                    }
                }
            }
        }

        &.is-more-than-half {
            +.progress-value {
                @include cv.register-vars(
                    (
                        "progress-value-color": #{cv.getVar("progress-value-color-invert")}
                    )
                );
            }

        }
    }

    &.is-not-native {
        @each $name, $pair in progress.$progress-colors {
            .progress-bar.is-#{$name} {
                @include cv.register-vars(
                    (
                        "progress-value-color": #{cv.getVar($name, "", "-invert")}
                    )
                );
            }
        }
    }

    &.is-squared {
        @include cv.register-vars((
            "progress-border-radius": 0
        ));
        
        .progress, .progress-bar {
            @include cv.register-vars((
                "progress-border-radius": 0
            ));
        }
    }
}

@mixin progress-size() {
    &.is-small {
        + .progress-value, .progress-value {
            font-size: calc(#{cv.getVar("size-small")} / 1.5);
            line-height: cv.getVar("size-small");
        }
    }
    &.is-medium {
        + .progress-value, .progress-value {
            font-size: calc(#{cv.getVar("size-medium")} / 1.5);
            line-height: cv.getVar("size-medium");
        }
    }
    &.is-large {
        + .progress-value, .progress-value {
            font-size: calc(#{cv.getVar("size-large")} / 1.5);
            line-height: cv.getVar("size-large");
        }
    }
}

.#{iv.$class-prefix}progress-wrapper {
    position: relative;
    overflow: hidden;

    &:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    .progress-value {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: calc(#{cv.getVar("size-normal")} / 1.5);
        line-height: cv.getVar("size-normal");
        font-weight: cv.getVar("weight-bold");
        color: cv.getVar('progress-value-color');
        white-space: nowrap;
    }

    .progress, .progress-bar {
        margin-bottom: 0;

        @include progress-size();

        &::-webkit-progress-value {
            transition: width 0.5s ease;
        }

        &.is-more-than-half {
            +.progress-value {
                color: cv.getVar('progress-value-color');
            }
        }
    }

    &.is-not-native {
        @extend .progress;
        white-space: nowrap;
        background-color: cv.getVar('progress-bar-background-color');
        border-radius: cv.getVar('progress-border-radius');

        .progress-bar {
            
            position: relative;
            display: inline-block;
            vertical-align: top;
            height: 100%;
            background-color: cv.getVar('progress-value-background-color');

            .progress-value {
                color: cv.getVar('progress-value-color');
            }
        }
    }
}