@import "../../../css/static/mixin";
@import "../../../css/static/properties";

html:root {
    --progress-bar-background: #242527;

    --progress-bar-filler-normal: #4370a299;
    --progress-bar-filler-error: #a1000099;
    --progress-bar-filler-success: #2b854199;
}

.container {
    position: relative;

    display: flex;
    flex-direction: row;
    justify-content: center;

    height: 1.4em;
    border-radius: 0.2em;

    overflow: hidden;

    background-color: var(--progress-bar-background);
    -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
    box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);

    .filler {
        position: absolute;

        top: 0;
        left: 0;
        bottom: 0;

        @include transition($button_hover_animation_time ease-in-out);
    }

    .text {
        align-self: center;
        z-index: 1;
    }

    &.type-normal {
        .filler {
            background-color: var(--progress-bar-filler-normal);
        }
    }

    &.type-error {
        .filler {
            background-color: var(--progress-bar-filler-error);
        }
    }

    &.type-success {
        .filler {
            background-color: var(--progress-bar-filler-success);
        }
    }
}