/// 
/// Scales an element when hovered, with a smooth transition.
/// 
/// @name hover_scale
/// @param {Number} $scale-factor - The scale factor on hover (default: 1.05).
/// @param {Number|Unit} $duration - The duration of the scale transition (default: 0.3s).
/// @example scss - Usage
///   @include hover_scale(1.1, 0.4s);
/// 
@mixin hover_scale($scale-factor: 1.05, $duration: 0.3s) {
    transition: transform #{$duration} ease-in-out;

    &:hover {
        transform: scale(#{$scale-factor});
    }
}

/// 
/// Applies a scaling effect to an element on hover.
/// 
/// @name hover_scale
/// @param {Number} $scale - The scaling factor (default: 1.1).
/// @param {Number|Unit} $duration - The duration of the transition (default: 0.3s).
/// @example scss - Usage
///   @include hover_scale(1.2, 0.5s);
/// 
@mixin hover_scale($scale: 1.1, $duration: 0.3s) {
    transition: transform $duration ease-in-out;

    &:hover {
        transform: scale($scale);
    }
}

/// 
/// Applies a smooth transition effect on hover for specified properties.
/// 
/// @name hover_transition
/// @param {List} $properties - List of properties to transition (default: all).
/// @param {Number|Unit} $duration - Duration of the transition (default: 0.3s).
/// @param {String} $timing-function - Timing function for the transition (default: ease).
/// @example scss - Usage
///   @include hover_transition(color, background-color, 0.5s, ease-in-out);
/// 
@mixin hover_transition($properties: all, $duration: 0.3s, $timing-function: ease) {
    transition: #{$properties} #{$duration} #{$timing-function};
    
    &:hover {
        @content;
    }
}