/* 骨架屏样式 */
@import './variables.css';

/* 骨架屏基础样式 */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading var(--transition-slow) infinite;
    border-radius: var(--border-radius-md);
}

/* 骨架屏动画 */
@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 文章列表骨架屏 */
.article-skeleton {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.article-meta-skeleton {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.category-skeleton {
    width: 60px;
    height: 24px;
    border-radius: 20px;
}

.date-skeleton {
    width: 80px;
    height: 16px;
    margin-left: auto;
}

.view-count-skeleton {
    width: 60px;
    height: 16px;
}

.title-skeleton {
    width: 100%;
    height: 24px;
    margin-bottom: var(--spacing-sm);
}

.excerpt-skeleton {
    width: 100%;
    height: 14px;
    margin-bottom: var(--spacing-xs);
}

.excerpt-skeleton:last-child {
    width: 80%;
}

/* 工具卡片骨架屏 */
.tool-skeleton {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tool-icon-skeleton {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
}

.tool-title-skeleton {
    width: 80%;
    height: 20px;
    margin-bottom: var(--spacing-sm);
}

.tool-content-skeleton {
    width: 100%;
    height: 14px;
    margin-bottom: var(--spacing-xs);
}

.tool-content-skeleton:last-child {
    width: 90%;
}

/* 友链卡片骨架屏 */
.friend-skeleton {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    min-height: 100px;
}

.friend-avatar-skeleton {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: var(--spacing-md);
}

.friend-info-skeleton {
    flex: 1;
}

.friend-name-skeleton {
    width: 60%;
    height: 20px;
    margin-bottom: var(--spacing-xs);
}

.friend-bio-skeleton {
    width: 100%;
    height: 14px;
    margin-bottom: var(--spacing-xs);
}

.friend-bio-skeleton:last-child {
    width: 90%;
}

/* 统计侧边栏骨架屏 */
.stats-skeleton {
    width: 100%;
    background: var(--bg-tertiary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.stats-title-skeleton {
    width: 80%;
    height: 20px;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-light);
}

.stat-item-skeleton {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-light);
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.stat-label-skeleton {
    width: 60%;
    height: 16px;
    margin: 0 auto var(--spacing-xs);
}

.stat-value-skeleton {
    width: 40%;
    height: 20px;
    margin: 0 auto var(--spacing-xs);
}

.stat-description-skeleton {
    width: 80%;
    height: 14px;
    margin: 0 auto;
}

/* 响应式骨架屏 */
@media (max-width: var(--breakpoint-md)) {
    /* 移动端文章骨架屏 */
    .article-skeleton {
        padding: var(--spacing-md);
    }

    .tool-skeleton {
        padding: var(--spacing-md);
        min-height: 160px;
    }

    .tool-icon-skeleton {
        width: 50px;
        height: 50px;
    }

    .friend-skeleton {
        padding: var(--spacing-md);
        min-height: 80px;
    }

    .friend-avatar-skeleton {
        width: 40px;
        height: 40px;
    }

    .stats-skeleton {
        padding: var(--spacing-md);
    }
}

/* 隐藏内容，显示骨架屏 */
.loading .skeleton-content {
    display: none;
}

.loading .skeleton-placeholder {
    display: block;
}

/* 默认隐藏骨架屏 */
.skeleton-placeholder {
    display: none;
}