/*!
 * # Semantic UI 2.3.3 - Loader
 * http://github.com/semantic-org/semantic-ui/
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 */

/* Accent-aware staged bar loader */
.loader {
    --loader-color-rest: rgba(150, 145, 134, 0.3);
    --loader-color-active: var(--modern-accent-bright, #d6ad54);
    --loader-size: .7px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    text-align: center;
    z-index: 1000;
    transform: translateX(-50%) translateY(-50%);
    width: calc(140 * var(--loader-size));
    height: calc(20 * var(--loader-size));
    background-image:
        linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
        linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
        linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
        linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0);
    background-repeat: no-repeat;
    background-position:
        0 0,
        calc(40 * var(--loader-size)) 0,
        calc(80 * var(--loader-size)) 0,
        calc(120 * var(--loader-size)) 0;
    background-size: calc(20 * var(--loader-size)) auto;
    filter: drop-shadow(0 0 7px rgba(var(--modern-accent-rgb, 214, 173, 84), .2));
    animation: loader-bars-fill 1s steps(4, end) infinite;
}

.loader::before,
.loader::after {
    display: none;
}

@keyframes loader-bars-fill {
    0% {
        background-image:
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0);
    }
    25% {
        background-image:
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0);
    }
    50% {
        background-image:
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0);
    }
    75% {
        background-image:
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-rest) calc(20 * var(--loader-size)), transparent 0);
    }
    100% {
        background-image:
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0),
            linear-gradient(var(--loader-color-active) calc(20 * var(--loader-size)), transparent 0);
    }
}

.loader.disabled,
.loader.hidden {
    display: none;
}

/* Inverted */

.loader.inverted {
    --loader-color-rest: rgba(255, 255, 255, .25);
}

@media (prefers-reduced-motion: reduce) {
    .loader {
        animation-duration: 2.4s;
    }
}