// ============================================================================
// icon.gl | Animations
// ============================================================================

@use "../dev" as *;
@use "../variables" as *;
@use "base" as *;


// @mixin hover-animation($transition-duration: 0.3s) {
//     transition: all $transition-duration ease;
//     &:hover {
//         transform: scale(1.1);
//     }
// }

// .hover-grow {
//     @include hover-animation();
// }

// Hover
// ----------------------------------------------------------------------------

@mixin animate_hover($scale: 1.05, $duration: 0.3s, $timing-function: ease-in-out) {
    transition: transform $duration $timing-function;
    &:hover {
        transform: scale($scale);
    }
}

.animate_hover {
    @include animate_hover();
}


// Hover Bounce
// ----------------------------------------------------------------------------

@mixin animate_hover_bounce($distance: 10px, $duration: 0.3s) {
    transition: transform $duration ease-in-out;
    &:hover {
        animation-name: animate_bounce;
        animation-duration: $duration;
        animation-fill-mode: forwards;
        @keyframes animate_bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-$distance); }
        }
    }
}

.animate_hover_bounce {
    @include animate_hover_bounce();
}




// Hover Scale
// ----------------------------------------------------------------------------

@mixin animate_hover_scale($scale: 1.1, $duration: 0.3s) {
    transition: transform $duration ease-in-out;
    &:hover {
        transform: scale($scale);
    }
}

.animate_hover_scale {
    @include animate_hover_scale();
}

// Hover Rotate
// ----------------------------------------------------------------------------

@mixin animate_hover_rotate($angle: 15deg, $duration: 0.5s) {
    transition: transform $duration ease-in-out;
    &:hover {
        transform: rotate($angle);
    }
}

.animate_hover_rotate {
    @include animate_hover_rotate();
}




// Hover Drop Animation:
// ----------------------------------------------------------------------------

@mixin animate_hover_drop($distance: 5px, $duration: 0.3s) {
    transition: transform $duration ease-in-out;
    &:hover {
        transform: translateY($distance);
    }
}

.animate_hover_drop {
    @include animate_hover_drop();
}