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

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

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

.static-arrow.align-left.svelte-hfoo7h,
.arrow-odds.align-left.svelte-hfoo7h {
    right: calc(100% + var(--spacingEm-0-25))
}

.static-arrow.align-right.svelte-hfoo7h,
.arrow-odds.align-right.svelte-hfoo7h {
    left: calc(100% + var(--spacingEm-0-25))
}

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

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

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

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

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

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