:root {
    --loader-primary: hsl(210, 92%, 44%);
    --loader-accent: hsl(350, 47%, 42%);
    --loader-contrast: hsl(230, 2%, 48%);
    --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-theme="dark"] :root {
    --loader-primary: hsl(250, 100%, 69%);
    --loader-accent: hsl(342, 92%, 47%);
    --loader-contrast: hsl(250, 100%, 69%);
    --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-theme="dark"] {
    background-color: hsl(232, 11%, 15%);
}

.fill-loader {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: 3rem;
}

.fill-loader__fill {
    position: absolute;
}

@supports (-webkit-animation-name: this) or (animation-name: this) {
    .fill-loader__label {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
    }
}

@supports (-webkit-animation-name: this) or (animation-name: this) {
    .fill-loader--v4 {
        width: 90%;
        max-width: 300px;
    }

    .fill-loader--v4 .fill-loader__base {
        height: 4px;
        background-color: var(--loader-contrast);
    }

    .fill-loader--v4 .fill-loader__fill {
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background-color: var(--loader-primary);
        -webkit-animation: fill-loader-4 1.6s infinite var(--loader-easing);
        animation: fill-loader-4 1.6s infinite var(--loader-easing);
        will-change: left, right;
    }
}

@-webkit-keyframes fill-loader-4 {
    0% {
        left: 0;
        right: 100%;
        background-color: var(--loader-primary);
    }

    10%,
    60% {
        left: 0;
    }

    40%,
    90% {
        right: 0;
    }

    50% {
        left: 100%;
        background-color: var(--loader-primary);
    }

    51% {
        left: 0;
        right: 100%;
        background-color: var(--loader-accent);
    }

    100% {
        left: 100%;
        background-color: var(--loader-accent);
    }
}
@keyframes fill-loader-4 {
    0% {
        left: 0;
        right: 100%;
        background-color: var(--loader-primary);
    }

    10%,
    60% {
        left: 0;
    }

    40%,
    90% {
        right: 0;
    }

    50% {
        left: 100%;
        background-color: var(--loader-primary);
    }

    51% {
        left: 0;
        right: 100%;
        background-color: var(--loader-accent);
    }

    100% {
        left: 100%;
        background-color: var(--loader-accent);
    }
}