// Mixin for the shaking animation
@mixin shake-animation($duration: 0.5s, $intensity: 10px, $repetition-amount: infinite) {
    @keyframes shake {
        0% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-$intensity);
        }
        50% {
            transform: translateX($intensity);
        }
        75% {
            transform: translateX(-$intensity);
        }
        100% {
            transform: translateX(0);
        }
    }

    animation: shake $duration ease-in-out $repetition-amount;
}

// Mixin for the bounce animation
@mixin bounce-animation($duration: 2s, $offset: 1rem, $repetition-amount: infinite) {
    @keyframes bounce {
        0% {
            opacity: 0;
            transform: translateY(-100%);
        }
        20% {
            transform: translateY(0);
            opacity: 1;
        }
        40% {
            transform: translateY(-#{$offset});
            opacity: 1;
        }
        60% {
            transform: translateY(0);
            opacity: 1;
        }
        80% {
            transform: translateY(-#{$offset/2});
            opacity: 1;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    animation: bounce $duration ease $repetition-amount;
}

// Mixin for the spin animation
@mixin spinner-animation($duration: 1s, $timing: linear, $repetition-amount: infinite) {
    // Create animation for spinner
    animation: spin $duration $timing $repetition-amount;
}

// Mixin for the fade animation
@mixin fade-animation($duration: 1s, $timing: linear, $repetition-amount: infinite) {
    animation: fade $duration $timing $repetition-amount;
}

// Mixin for the slide effect
@mixin slide-animation($duration: 300ms, $timing: ease-out, $direction: 'right') {
    // Apply the correct keyframe animation based on the direction
    @if $direction == 'right' {
        animation: slide-right $duration $timing 1;
    } @else if $direction == 'left' {
        animation: slide-left $duration $timing 1;
    } @else if $direction == 'up' {
        animation: slide-up $duration $timing 1;
    } @else if $direction == 'down' {
        animation: slide-down $duration $timing 1;
    } @else if $direction == 'static' {
        animation: slide-static $duration $timing 1;
    }
}

// Placeholder glowing animation
@mixin glowing-background($duration: 2.5s) {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 75%);
    background-size: 200% 100%;
    animation: glowing $duration infinite ease-in-out;
}

// Base border style
@mixin base-border-style() {
    border-radius: $base-border-radius;
    border-style: solid;
    border-width: $base-border-sickness / 2;
    border-color: generate-shade(map-get($base-color-palette, "gray"), 30, 'lighten');
}

// It is used for active accordion, list-group-item etc
@mixin active-object-color() {
    $color: $primary;

    background-color: $color !important;
    color: get-contrast-color($color) !important;

    a {
        color: get-contrast-color($color) !important;
    }

    .btn-arrow::after,
    .btn-arrow::before,
    .btn-close::after,
    .btn-arrow::before {
        background-color: get-contrast-color($color) !important;
    }
}

// Base styles for the scroll animation
@mixin scroll-animation-styles {
    transition: transform $base-transition-time * 3 ease,
                opacity $base-transition-time * 3 ease,
                background-color $base-transition-time ease-in-out;

    backface-visibility: hidden;
    will-change: transform;
}


// Keyframes
@keyframes glowing {
    0% {
        background-position: 200% 0;
        opacity: 1;
    }
    50% {
        background-position: 100% 0;
        opacity: 0.8;
    }
    100% {
        background-position: 0 0;
        opacity: 1;
    }
}

@keyframes slide-right {
    from {
        translate: 100%;
        opacity: 0;
    }
    to {
        translate: 0;
        opacity: 1;
    }
}

@keyframes slide-left {
    from {
        translate: -100%;
        opacity: 0;
    }
    to {
        translate: 0;
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        translate: 0 -100%;
        opacity: 0;
    }
    to {
        translate: 0 0;
        opacity: 1;
    }
}

@keyframes slide-down {
    from {
        translate: 0 100%;
        opacity: 0;
    }
    to {
        translate: 0 0;
        opacity: 1;
    }
}

@keyframes slide-static {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}