/* ============================================
   CCB Corporate Design System V2
   Component: Spinner
   ============================================ */

.spinner {
    display: inline-block;
    width: var(--spinner-size, 32px);
    height: var(--spinner-size, 32px);
    border: var(--spinner-border-width, 3px) solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--spinner-color, var(--ccb-orange));
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

.spinner-grow {
    display: inline-block;
    width: var(--spinner-size, 32px);
    height: var(--spinner-size, 32px);
    background-color: var(--spinner-color, var(--ccb-orange));
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow 0.8s linear infinite;
}

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

@keyframes spinner-grow {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sizes */
.spinner-sm {
    --spinner-size: 16px;
    --spinner-border-width: 2px;
}

.spinner-lg {
    --spinner-size: 48px;
    --spinner-border-width: 4px;
}

.spinner-xl {
    --spinner-size: 64px;
    --spinner-border-width: 5px;
}

/* Colors */
.spinner-primary {
    --spinner-color: var(--theme-primary);
}

.spinner-success {
    --spinner-color: var(--theme-success);
}

.spinner-danger {
    --spinner-color: var(--theme-danger);
}

.spinner-warning {
    --spinner-color: var(--theme-warning);
}

.spinner-info {
    --spinner-color: var(--theme-info);
}

/* Visually Hidden (for accessibility) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}