.app-loader {
    position: fixed;
    background: #F5F5F5FF;
    display: block;
    opacity: 1;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    transition: opacity var(--r-motion-duration-300, 300ms) var(--r-motion-ease-out, ease-out);
    z-index: var(--r-z-index-35, 350);
}

.app-loader.dark-theme {
    background: #0d1117;
}

.app-loader .app-loader-icon-wrapper {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    background: var(--r-primary, #0044d4);
    border-radius: var(--r-border-radius-2, 4px);
    background-clip: padding-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.app-loader.dark-theme .app-loader-icon-wrapper {
    background: #3B6EDE;
}

.app-loader .app-loader-icon-wrapper > * {
    display: block;
    position: absolute;
    transition: height var(--r-motion-duration-300, 300ms) var(--r-motion-ease, ease);
    transform-origin: top;
    transform: rotate(180deg);
    width: 4px;
    background: #ffffff;
}

.app-loader .app-loader-icon-wrapper .app-loader-bar-sm {
    top: 28px;
    left: 9px;
    height: 14px;
    animation: app-loader-bar-sm-reset 0.5s normal;
}

.app-loader .app-loader-icon-wrapper .app-loader-bar-md {
    top: 28px;
    left: 16px;
    height: 17px;
    animation: app-loader-bar-md-reset 0.5s normal;
}

.app-loader .app-loader-icon-wrapper .app-loader-bar-lg {
    top: 28px;
    left: 23px;
    height: 20px;
    animation: app-loader-bar-lg-reset 0.5s normal;
}

.app-loader .app-loader-icon-wrapper .app-loader-bar-sm {
    height: 0;
    animation: app-loader-bar-sm-animation 1s infinite;
}

.app-loader .app-loader-icon-wrapper .app-loader-bar-md {
    height: 0;
    animation: app-loader-bar-md-animation 1s 0.2s infinite;
}

.app-loader .app-loader-icon-wrapper .app-loader-bar-lg {
    height: 0;
    animation: app-loader-bar-lg-animation 1s 0.4s infinite;
}

/* Keyframes */
@keyframes app-loader-bar-sm-animation {
    0% {
        height: 0;
    }
    50% {
        height: 14px;
    }
    100% {
        height: 0;
    }
}

@keyframes app-loader-bar-sm-reset {
    0% {
        height: 0;
    }
    100% {
        height: 14px;
    }
}

@keyframes app-loader-bar-md-animation {
    0% {
        height: 0;
    }
    50% {
        height: 17px;
    }
    100% {
        height: 0;
    }
}

@keyframes app-loader-bar-md-reset {
    0% {
        height: 0;
    }
    100% {
        height: 17px;
    }
}

@keyframes app-loader-bar-lg-animation {
    0% {
        height: 0;
    }
    50% {
        height: 20px;
    }
    100% {
        height: 0;
    }
}

@keyframes app-loader-bar-lg-reset {
    0% {
        height: 0;
    }
    100% {
        height: 20px;
    }
}