.loading-overlay {
    --loading-overlay-background: rgba(0, 0, 0, .4);
    --loading-overlay-border-radius: var(--border-radius-sm);

    position: absolute;
    inset: 0;
    background: var(--loading-overlay-background);
    border-radius: var(--loading-overlay-border-radius);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);

    &.loading-overlay--visible {
        display: flex;
    }
}

.loading-spinner {
    --spinner-size: 40px;
    --spinner-border-width: 3px;
    --spinner-color: var(--color-primary);
    --spinner-color-track: rgba(255, 153, 0, .3);
    --spinner-duration: .8s;
    --spinner-background: rgba(255, 255, 255, .8);
    --spinner-padding: var(--spacing-sm);
    --spinner-border-radius: var(--border-radius-sm);
    --spinner-shadow: var(--shadow-md);

    padding: var(--spinner-padding);
    background: var(--spinner-background);
    border-radius: var(--spinner-border-radius);
    box-shadow: var(--spinner-shadow);
    width: fit-content;
}

.loading-spinner__circle {
    width: var(--spinner-size);
    height: var(--spinner-size);
    border-radius: var(--border-radius-full);
    border: var(--spinner-border-width) solid var(--spinner-color-track);
    border-top-color: var(--spinner-color);
    animation: spinner var(--spinner-duration) linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}