.ui-animation-loading-spin {
    --ui-spinner-speed: .3s;
    --ui-spinner-size: 32px;
    --ui-spinner-color-default: rgba(from #fff r g b / 0.5);
    --ui-spinner-color-highlight: #fff;

    &:before {
        content: '';
        position: absolute;
        z-index: 5;
        display: block;
        width: var(--ui-spinner-size);
        height: var(--ui-spinner-size);
        border-radius: 50%;
        border-width: 3px;
        border-style: solid;
        border-color: var(--ui-spinner-color-default);
        border-left-color: var(--ui-spinner-color-highlight);
        transition: all .3s linear;
        transition-delay: .2s;
        animation: animation-loading-spin var(--ui-spinner-speed) infinite linear;
    }
}

@keyframes animation-loading-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.ui-animation-error-pulse {
    animation-name: animation-error-pulse;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;
}

@keyframes animation-error-pulse {
    0% { box-shadow: inset 0 0 0 0 rgba(from var(--color-btm-dark-red) r g b / 0); }
    50% { box-shadow: inset 0 0 225px 0 rgba(from var(--color-btm-dark-red) r g b / 0.35); }
    100% { box-shadow: inset 0 0 0 0 rgba(from var(--color-btm-dark-red) r g b / 0); }
}


.ui-animation-smooth-arrow-left-to-right {
    animation-name: animation-smooth-arrow-left-to-right;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

@keyframes animation-smooth-arrow-left-to-right {
    0% { transform: translateX(0); }
    50% { transform: translateX(8px); }
    100% { transform: translateX(0); }
}



.ui-animation-shimmer {
    background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);

    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );

    background-size: 200% 100%;
    background-position-x: 180%;
    animation: animation-shimmer 1.5s infinite linear;
}

@keyframes animation-shimmer {
    to {
        background-position-x: -20%;
    }
}