@import '_content/Verbaccio.Blazor.UI/Verbaccio.Blazor.UI.21butreggc.bundle.scp.css';

/* /Components/Layout/ChildLayout.razor.rz.scp.css */
[b-sytgucu12y] .nav-active {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}
/* /Components/Shared/Mascot.razor.rz.scp.css */
.mascot[b-ym65o12bdw] {
    width: var(--mascot-size, 140px);
    height: var(--mascot-size, 140px);
    margin-inline: auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}

.mascot--idle[b-ym65o12bdw] {
    background-image: url('/images/mascot/idle.png');
}

.mascot--wrong[b-ym65o12bdw] {
    background-image: url('/images/mascot/wrong.png');
}

/* One wide strip of frames: the box shows one frame at a time and steps through them. */
.mascot--correct[b-ym65o12bdw] {
    background-image: url('/images/mascot/correct-sheet.png');
    background-size: calc(var(--mascot-frames, 12) * 100%) 100%;
    animation-name: mascot-cheer-b-ym65o12bdw;
    animation-duration: var(--mascot-duration, .5s);
    animation-timing-function: steps(var(--mascot-frames, 12), jump-none);
    animation-iteration-count: var(--mascot-repeat, 2);
    animation-fill-mode: both;
}

@keyframes mascot-cheer-b-ym65o12bdw {
    from {
        background-position-x: 0%;
    }

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

/* Someone who asked for less movement gets the first frame and nothing else. */
@media (prefers-reduced-motion: reduce) {
    .mascot--correct[b-ym65o12bdw] {
        animation: none;
        background-position-x: 0%;
    }
}