:root{--loading-placeholder-background-img-light: linear-gradient(90deg,
    rgb(222,222,222) 25%,
    rgb(200,200,200) 50%,
    rgb(200,200,200) 75%,
    rgb(222,222,222) 100%
    );
    --loading-placeholder-background-img-dark: linear-gradient(90deg,
    rgb(32,32,32) 25%,
    rgb(55,55,55) 50%,
    rgb(55,55,55) 75%,
    rgb(32,32,32) 100%
    );
}

.loading-components-light::after{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: loading-animation 1.5s cubic-bezier(.8, 0.0, 0.0, 1.0) infinite;
    opacity: 1;
    transition: none;
    background-size: 50% 50%;background-image: var(--loading-placeholder-background-img-light);
    z-index: 2;
    pointer-events: none;
}

.loading-components-light::before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    transition: none;
    z-index: 1;
    pointer-events: none;
}


.loading-components-dark::after{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: loading-animation 0.5s cubic-bezier(.8, 0.0, 0.0, 1.0) infinite;
    opacity: 1;
    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
    background-size: 50% 50%;background-image: var(--loading-placeholder-background-img-dark);
    pointer-events: none;
}

.loading-components-dark::before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
    pointer-events: none;
}

.loaded-components-light::after{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
    background-size: 50% 50%;background-image: var(--loading-placeholder-background-img-light);
    z-index: 2;
    pointer-events: none;
}

.loaded-components-light::before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
    z-index: 1;
    pointer-events: none;
}

.loaded-components-dark::after{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
    background-size: 50% 50%;background-image: var(--loading-placeholder-background-img-dark);
    pointer-events: none;
}

.loaded-components-dark::before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: all cubic-bezier(.8, 0.0, 0.0, 1.0) .5s;
    pointer-events: none;
}

@keyframes loading-animation {
    from {
        background-position-y: 50%;
        background-position-x: 0%;
    }

    to {
        background-position-y: 50%;
        background-position-x: 100%;
    }
}

.fade {
    opacity: 0.0;
}