// ============================================================================
// 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;
}

/// Spinner Utility Classes
.spinner {
    @include spinner--base();
}

.spinner--sm {
    @include spinner--base(2, q(2));
}

.spinner--md {
    @include spinner--base(3, q(3));
}

.spinner--lg {
    @include spinner--base(4, q(4));
}