/**
 * Filter Loading States
 * Loading indicators for filter area
 * Requirements: 9.4
 */

/* Filter Loading Container */
.filter-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 32px);
    background: var(--color-bg, #ffffff);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-border, #e5e7eb);
}

/* Spinner Type */
.filter-loading--spinner {
    flex-direction: column;
    gap: var(--spacing-4, 16px);
}

.filter-loading__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-loading__text {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-secondary, #6b7280);
    font-weight: var(--font-weight-medium, 500);
}

/* Skeleton Type */
.filter-loading--skeleton {
    flex-direction: column;
    gap: var(--spacing-6, 24px);
    width: 100%;
    padding: var(--spacing-6, 24px);
}

.filter-loading__skeleton-tabs {
    display: flex;
    gap: var(--spacing-3, 12px);
    flex-wrap: wrap;
}

.filter-loading__skeleton-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 16px);
}

/* Loading Overlay for Existing Filters */
.article-filters--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.article-filters--loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg, 12px);
    z-index: 10;
}

[data-theme="dark"] .article-filters--loading::after {
    background: rgba(0, 0, 0, 0.6);
}

/* Loading Spinner in Overlay */
.article-filters--loading .filter-loading__overlay-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3, 12px);
}

/* Inline Loading State */
.filter-loading--inline {
    padding: var(--spacing-4, 16px);
    background: transparent;
    border: none;
}

/* Small Loading State */
.filter-loading--small {
    padding: var(--spacing-3, 12px);
}

.filter-loading--small .filter-loading__spinner svg {
    width: 20px;
    height: 20px;
}

.filter-loading--small .filter-loading__text {
    font-size: var(--font-size-xs, 12px);
}

/* Loading State for Results Counter */
.article-filters__results--loading {
    opacity: 0.5;
}

.article-filters__results--loading .article-filters__count {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
}

.article-filters__results--loading .article-filters__count::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-primary, #3b82f6);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Loading State for Filter Chips */
.article-filters__chips--loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Loading State for Sort Dropdown */
.article-filters__select--loading {
    opacity: 0.5;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10' opacity='0.25'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10' opacity='0.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* Pulse Animation for Loading */
@keyframes loadingPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.filter-loading--pulse {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

/* Dots Loading Animation */
@keyframes dotPulse {
    0%, 80%, 100% {
        opacity: 0.3;
    }
    40% {
        opacity: 1;
    }
}

.filter-loading__dots {
    display: flex;
    gap: var(--spacing-2, 8px);
}

.filter-loading__dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary, #3b82f6);
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.filter-loading__dot:nth-child(1) {
    animation-delay: 0s;
}

.filter-loading__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.filter-loading__dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .filter-loading {
        padding: var(--spacing-6, 24px);
    }
    
    .filter-loading--skeleton {
        padding: var(--spacing-4, 16px);
    }
    
    .filter-loading__skeleton-tabs {
        flex-direction: column;
    }
    
    .filter-loading__skeleton-tabs .skeleton {
        width: 100% !important;
    }
}

/* Reduce Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner,
    .filter-loading__dot,
    .article-filters__results--loading .article-filters__count::before {
        animation: none;
    }
    
    .filter-loading--pulse {
        animation: none;
        opacity: 0.7;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .filter-loading {
    background: var(--color-bg-secondary, #1f2937);
    border-color: var(--color-border-dark, #374151);
}