/* Component: Spinner
 * Description: A circular loading spinner component. Uses a rotating border animation to indicate loading state.
 *              The spinner is styled with customizable colors via CSS variables, and supports hiding via the
 *              [aria-hidden="true"] attribute for accessibility.
 */

 
.smd-component_spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-background-lighter);
    border-top: 3px solid var(--color-branding-primary);
    border-radius: 50%;
    animation: spin 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
    display: inline-block;
    box-sizing: border-box;
    will-change: transform;
}

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

.smd-component_spinner[aria-hidden="true"] {
    visibility: hidden;
}