// ============================================================================
// move.gl | Spinner Loader Mixins
// ============================================================================
// Copyright 2025 Scape Agency BV
// Licensed under MIT License
// ============================================================================

////
/// Spinner Loader Mixins
/// ===========================================================================
///
/// This module provides spinner animation mixins for creating rotating
/// border and growing circle loading indicators.
///
/// @group Loaders
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
////


// ============================================================================
// Use
// ============================================================================

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


// ============================================================================
// Keyframes
// ============================================================================

/// Spinner border rotation keyframes
@mixin keyframes_spinner_border {
    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }
}

/// Spinner grow keyframes
@mixin keyframes_spinner_grow {
    @keyframes spinner-grow {
        0% {
            transform: scale(0);
        }
        50% {
            opacity: 1;
            transform: none;
        }
    }
}


// ============================================================================
// Mixins
// ============================================================================

/// Base spinner mixin
/// @param {Number} $width [$spinner-width] - Width of the spinner
/// @param {Number} $height [$spinner-height] - Height of the spinner
/// @param {Number} $speed [$spinner-animation-speed] - Animation duration
@mixin spinner_base(
    $width: $spinner-width,
    $height: $spinner-height,
    $speed: $spinner-animation-speed
) {
    display: inline-block;
    width: $width;
    height: $height;
    vertical-align: $spinner-vertical-align;
    border-radius: 50%;
}

/// Spinner border mixin - creates a rotating border spinner
/// @param {Number} $width [$spinner-width] - Width of the spinner
/// @param {Number} $height [$spinner-height] - Height of the spinner
/// @param {Number} $border-width [$spinner-border-width] - Border thickness
/// @param {Number} $speed [$spinner-animation-speed] - Animation duration
/// @param {Color} $color [currentcolor] - Spinner color
@mixin spinner_border(
    $width: $spinner-width,
    $height: $spinner-height,
    $border-width: $spinner-border-width,
    $speed: $spinner-animation-speed,
    $color: currentcolor
) {
    @include spinner_base($width, $height, $speed);
    border: $border-width solid $color;
    border-right-color: transparent;
    animation: spinner-border $speed linear infinite;
}

/// Spinner border small variant
/// @param {Number} $width [$spinner-width-sm] - Width of small spinner
/// @param {Number} $height [$spinner-height-sm] - Height of small spinner
/// @param {Number} $border-width [$spinner-border-width-sm] - Border thickness
/// @param {Number} $speed [$spinner-animation-speed] - Animation duration
/// @param {Color} $color [currentcolor] - Spinner color
@mixin spinner_border_sm(
    $width: $spinner-width-sm,
    $height: $spinner-height-sm,
    $border-width: $spinner-border-width-sm,
    $speed: $spinner-animation-speed,
    $color: currentcolor
) {
    @include spinner_border($width, $height, $border-width, $speed, $color);
}

/// Spinner grow mixin - creates a pulsing/growing spinner
/// @param {Number} $width [$spinner-width] - Width of the spinner
/// @param {Number} $height [$spinner-height] - Height of the spinner
/// @param {Number} $speed [$spinner-animation-speed] - Animation duration
/// @param {Color} $color [currentcolor] - Spinner color
@mixin spinner_grow(
    $width: $spinner-width,
    $height: $spinner-height,
    $speed: $spinner-animation-speed,
    $color: currentcolor
) {
    @include spinner_base($width, $height, $speed);
    background-color: $color;
    opacity: 0;
    animation: spinner-grow $speed linear infinite;
}

/// Spinner grow small variant
/// @param {Number} $width [$spinner-width-sm] - Width of small spinner
/// @param {Number} $height [$spinner-height-sm] - Height of small spinner
/// @param {Number} $speed [$spinner-animation-speed] - Animation duration
/// @param {Color} $color [currentcolor] - Spinner color
@mixin spinner_grow_sm(
    $width: $spinner-width-sm,
    $height: $spinner-height-sm,
    $speed: $spinner-animation-speed,
    $color: currentcolor
) {
    @include spinner_grow($width, $height, $speed, $color);
}


// ============================================================================
// Utility Generator
// ============================================================================

/// Generate spinner utility classes
@mixin generate_spinner_utilities {
    // Include keyframes
    @include keyframes_spinner_border;
    @include keyframes_spinner_grow;

    .spinner-border {
        @include spinner_border;
    }

    .spinner-border-sm {
        @include spinner_border_sm;
    }

    .spinner-grow {
        @include spinner_grow;
    }

    .spinner-grow-sm {
        @include spinner_grow_sm;
    }

    // Reduced motion support
    @media (prefers-reduced-motion: reduce) {
        .spinner-border,
        .spinner-grow {
            animation-duration: $spinner-animation-speed * 2;
        }
    }
}