.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) var(--r-motion-ease-out);
    z-index: var(--r-z-index-35);
}

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

.app-loader .app-loader-icon-wrapper {
    display: block;
    position: relative;
    width: 72px;
    height: 72px;
    background: #0044D4;
    border-radius: 8px;
    background-clip: padding-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.app-loader.dark-theme .app-loader-icon-wrapper {
    background: #0244D4;
}

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

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

.app-loader .app-loader-icon-wrapper .app-loader-bar-md {
    top: 56px;
    left: 32px;
    height: 34px;
    animation: app-loader-bar-md-reset 0.5s normal;
}

.app-loader .app-loader-icon-wrapper .app-loader-bar-lg {
    top: 56px;
    left: 46px;
    height: 40px;
    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: 28px;
    }
    100% {
        height: 0;
    }
}

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

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

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

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

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