/* =========================================
   STATES & MODIFIERS
   Global state utilities and modifiers
   ========================================= */

/* State: Hidden */
.hidden {
    display: none !important;
}

/* State: Loading */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    color: var(--primary-color);
}

.spinner {
    font-size: 2rem;
    animation: spin 1s infinite linear;
    margin-bottom: 15px;
}

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

/* Modifier: Desktop Only */
.desktop-only {
    display: inline;
}

@media (max-width: 900px) {
    .desktop-only {
        display: none;
    }
}