capy-loader {
    display: inline-block;
    flex: none;

    font-size: 7.5px;
    line-height: 0;
    vertical-align: middle;
}

capy-loader.capy-lg { font-size: 10px; }
capy-loader.capy-sm { font-size: 4.5px; }
capy-loader.capy-xs { font-size: 1.9px; vertical-align: -0.15em; }

.capybaraloader,
.capybaraloader * {
    box-sizing: content-box;
}

.capybaraloader {
    width: 14em;
    height: 10em;
    position: relative;
    z-index: 1;
    --color: rgb(204, 125, 45);
    --color2: rgb(83, 56, 28);
}

.capybaraloader .capybara {
    width: 100%;
    height: 7.5em;
    position: relative;
    z-index: 1;
}

.capybaraloader .loader {
    width: 100%;
    height: 2.5em;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.capybaraloader .capy {
    width: 85%;
    height: 100%;
    background: linear-gradient(var(--color), 90%, var(--color2));
    border-radius: 45%;
    position: relative;
    z-index: 1;
    animation: capy-movebody 1s linear infinite;
}

.capybaraloader .capyhead {
    width: 7.5em;
    height: 7em;
    bottom: 0em;
    right: 0em;
    position: absolute;
    background-color: var(--color);
    z-index: 3;
    border-radius: 3.5em;
    box-shadow: -1em 0em var(--color2);
    animation: capy-movebody 1s linear infinite;
}

.capybaraloader .capyear {
    width: 2em;
    height: 2em;
    background: linear-gradient(-45deg, var(--color), 90%, var(--color2));
    top: 0em;
    left: 0em;
    border-radius: 100%;
    position: absolute;
    overflow: hidden;
    z-index: 3;
}

.capybaraloader .capyear:nth-child(2) {
    left: 5em;
    background: linear-gradient(25deg, var(--color), 90%, var(--color2));
}

.capybaraloader .capyear2 {
    width: 100%;
    height: 1em;
    background-color: var(--color2);
    bottom: 0em;
    left: 0.5em;
    border-radius: 100%;
    position: absolute;
    transform: rotate(-45deg);
}

.capybaraloader .capymouth {
    width: 3.5em;
    height: 2em;
    background-color: var(--color2);
    position: absolute;
    bottom: 0em;
    left: 2.5em;
    border-radius: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5em;
}

.capybaraloader .capylips {
    width: 0.25em;
    height: 0.75em;
    border-radius: 100%;
    transform: rotate(-45deg);
    background-color: var(--color);
}

.capybaraloader .capylips:nth-child(2) {
    transform: rotate(45deg);
}

.capybaraloader .capyeye {
    width: 2em;
    height: 0.5em;
    background-color: var(--color2);
    position: absolute;
    bottom: 3.5em;
    left: 1.5em;
    border-radius: 5em;
    transform: rotate(45deg);
}

.capybaraloader .capyeye:nth-child(4) {
    transform: rotate(-45deg);
    left: 5.5em;
    width: 1.75em;
}

.capybaraloader .capyleg {
    width: 6em;
    height: 5em;
    bottom: 0em;
    left: 0em;
    position: absolute;
    background: linear-gradient(var(--color), 95%, var(--color2));
    z-index: 2;
    border-radius: 2em;
    animation: capy-movebody 1s linear infinite;
}

.capybaraloader .capyleg2 {
    width: 1.75em;
    height: 3em;
    bottom: 0em;
    left: 3.25em;
    position: absolute;
    background: linear-gradient(var(--color), 80%, var(--color2));
    z-index: 2;
    border-radius: 0.75em;
    box-shadow: inset 0em -0.5em var(--color2);
    animation: capy-moveleg 1s linear infinite;
}

.capybaraloader .capyleg2:nth-child(3) {
    width: 1.25em;
    left: 0.5em;
    height: 2em;
    animation: capy-moveleg2 1s linear infinite 0.075s;
}

@keyframes capy-moveleg {
    0% { transform: rotate(-45deg) translateX(-5%); }
    50% { transform: rotate(45deg) translateX(5%); }
    100% { transform: rotate(-45deg) translateX(-5%); }
}

@keyframes capy-moveleg2 {
    0% { transform: rotate(45deg); }
    50% { transform: rotate(-45deg); }
    100% { transform: rotate(45deg); }
}

@keyframes capy-movebody {
    0% { transform: translateX(0%); }
    50% { transform: translateX(2%); }
    100% { transform: translateX(0%); }
}

.capybaraloader .loaderline {
    width: 50em;
    height: 0.5em;
    border-top: 0.5em dashed var(--color2);
    animation: capy-moveline 10s linear infinite;
}

@keyframes capy-moveline {
    0% { transform: translateX(0%); opacity: 0%; }
    5% { opacity: 100%; }
    95% { opacity: 100%; }
    100% { opacity: 0%; transform: translateX(-70%); }
}

capy-loader.capy-xs .capybaraloader { height: 7.5em; }
capy-loader.capy-xs .loader { display: none; }

html.reduce-motion .capybaraloader * {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .capybaraloader * {
        animation: none !important;
    }
}