/* --- Loading Spinner --- */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--primary-color);
    animation: spin 0.8s linear infinite;
    margin: var(--spacing-lg) auto;
}

.spinner-inline {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--spacing-sm);
    margin-top: -2px;
    margin-bottom: 0;
    margin-left: 0;
}

button .spinner-inline {
    border-left-color: white;
}

button.ghost .spinner-inline {
    border-left-color: var(--primary-color);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}