/*
|--------------------------------------------------------------------------
| Progress Bar
|--------------------------------------------------------------------------
*/

.ul-progress{

    width:100%;

    height:10px;

    background:#2B3648;

    border-radius:999px;

    overflow:hidden;

}

.ul-progress__fill{

    height:100%;

    width:0;

    background:linear-gradient(
        90deg,
        var(--ul-primary),
        var(--ul-primary-dark)
    );

    transition:width .30s ease;

}

/* Reutilizable: anima cualquier relleno que defina --ul-progress-value. */
.ul-progress-fill--animated{

    width:0 !important;
    transition:width 1.05s cubic-bezier(.22,.61,.36,1);

}

.ul-progress-fill--animated.is-filled{

    width:var(--ul-progress-value) !important;

}

@media(prefers-reduced-motion:reduce){

    .ul-progress-fill--animated{

        width:var(--ul-progress-value) !important;
        transition:none;

    }

}