@keyframes svelte-fmmb4n-increased {
    0%,
    20% {
        transform: translateY(20%);
        opacity: 1
    }
    to {
        transform: translateY(-20%);
        opacity: 0
    }
}

@keyframes svelte-fmmb4n-decreased {
    0%,
    20% {
        transform: translateY(-20%);
        opacity: 1
    }
    to {
        transform: translateY(20%);
        opacity: 0
    }
}

.static-arrow.svelte-fmmb4n,
.arrow-odds.svelte-fmmb4n {
    position: absolute;
    font-size: var(--text-size-sm)
}

.static-arrow.align-left.svelte-fmmb4n,
.arrow-odds.align-left.svelte-fmmb4n {
    right: calc(100% + .25em)
}

.static-arrow.align-right.svelte-fmmb4n,
.arrow-odds.align-right.svelte-fmmb4n {
    left: calc(100% + .25em)
}

.static-arrow.increased.svelte-fmmb4n,
.arrow-odds.increased.svelte-fmmb4n {
    color: var(--green-500)
}

.static-arrow.decreased.svelte-fmmb4n,
.arrow-odds.decreased.svelte-fmmb4n {
    color: var(--red-500)
}

.static-arrow.svelte-fmmb4n {
    top: 15%
}

.arrow-odds.svelte-fmmb4n {
    animation-duration: .8s;
    animation-iteration-count: 4;
    animation-fill-mode: forwards
}

.arrow-odds.increased.svelte-fmmb4n {
    top: 15%;
    animation-name: svelte-fmmb4n-increased
}

.arrow-odds.decreased.svelte-fmmb4n {
    top: 25%;
    animation-name: svelte-fmmb4n-decreased
}