@mixin spinner-color($color) {
    border-color: $color $color $color transparent !important;
}

.bbr-spinner {
    display: inline-block;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: bbr-spin 0.75s linear infinite;

    // Sizes
    &.is-small {
        width: 1rem;
        height: 1rem;
        border-width: 2px;
    }

    &.is-normal {
        width: 1.5rem;
        height: 1.5rem;
    }

    &.is-medium {
        width: 2.25rem;
        height: 2.25rem;
        border-width: 4px;
    }

    &.is-large {
        width: 3rem;
        height: 3rem;
        border-width: 4px;
    }

    // Color variants — hardcoded to match Bulma defaults
    &.is-primary {
        @include spinner-color(#00d1b2);
    }

    &.is-link {
        @include spinner-color(#485fc7);
    }

    &.is-info {
        @include spinner-color(#3e8ed0);
    }

    &.is-success {
        @include spinner-color(#48c774);
    }

    &.is-warning {
        @include spinner-color(#ffe08a);
    }

    &.is-danger {
        @include spinner-color(#f14668);
    }

    &.is-default {
        @include spinner-color(#363636);
    }

    &__overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.6);
        z-index: 10;
    }
}

@keyframes bbr-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}