/**
 * Animations (using IntersectionObserver)
 * ----------------------------------------------------------------------------
 */

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes cart-updated {
    0% {
        background-color: $success-color;
    }
    100% {
        background-color: $color-gray-75;
    }
}

[data-animated] {
    opacity: 0;

    &[data-animated-visible] {
        animation: $transition fade-in;
        animation-fill-mode: forwards;

        &[data-animation="slide-down"] {
            animation: $transition slide-down;
            animation-fill-mode: forwards;
        }
    }
}
