// ============================================================================
// Atoms | Spinner
// ============================================================================

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

/// Spinner animation keyframes
@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/// Spinner Base Mixin
/// @group Spinner
@mixin spinner--base(
    $size: 3,
    $thickness: q(2),
    $color: var(--color_accent_primary)
) {
    display: inline-block;
    width: baseline($size);
    height: baseline($size);
    border: $thickness solid rgba(0, 0, 0, 0.1);
    border-top: $thickness solid #{$color};
    border-radius: 50%;
    animation: spinner-rotate 0.6s linear infinite;
}

/// Default spinner mixin
/// @group Spinner
@mixin spinner {
    @include spinner--base();
}

/// Small spinner mixin
/// @group Spinner
@mixin spinner--sm {
    @include spinner--base(2, q(2));
}

/// Medium spinner mixin
/// @group Spinner
@mixin spinner--md {
    @include spinner--base(3, q(3));
}

/// Large spinner mixin
/// @group Spinner
@mixin spinner--lg {
    @include spinner--base(4, q(4));
}

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

/// Growing spinner variant mixin
/// @group Spinner
@mixin spinner_grow {
    display: inline-block;
    width: baseline(3);
    height: baseline(3);
    vertical-align: text-bottom;
    background-color: currentcolor;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow 0.75s linear infinite;

    &--sm {
        width: baseline(2);
        height: baseline(2);
    }

    &--lg {
        width: baseline(4);
        height: baseline(4);
    }
}

/// Primary spinner color mixin
/// @group Spinner
@mixin spinner--primary {
    border-top-color: var(--color_accent_primary);
}

/// Secondary spinner color mixin
/// @group Spinner
@mixin spinner--secondary {
    border-top-color: var(--color_text_secondary);
}

/// Success spinner color mixin
/// @group Spinner
@mixin spinner--success {
    border-top-color: var(--color_log_success);
}

/// Warning spinner color mixin
/// @group Spinner
@mixin spinner--warning {
    border-top-color: var(--color_log_warning);
}

/// Danger spinner color mixin
/// @group Spinner
@mixin spinner--danger {
    border-top-color: var(--color_log_error);
}

/// Info spinner color mixin
/// @group Spinner
@mixin spinner--info {
    border-top-color: var(--color_log_info);
}

/// Light spinner color mixin
/// @group Spinner
@mixin spinner--light {
    border-top-color: var(--color_fill_01);
}

/// Dark spinner color mixin
/// @group Spinner
@mixin spinner--dark {
    border-top-color: var(--color_fill_04);
}