/* ==========================================================================
   骨架屏组件 (Skeleton)
   ========================================================================== */

.zuoekai-skeleton {
  background-color: var(--zuoekai-skeleton-bg);
  border-radius: var(--zuoekai-radius-sm);
  position: relative;
  overflow: hidden;
}

/* 闪光动画 */
.zuoekai-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    transparent 0,
    var(--zuoekai-skeleton-shimmer) 50%,
    transparent 100%
  );
  animation: zuoekai-skeleton-shimmer 2s infinite;
}

@keyframes zuoekai-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* --- 变体 (Variants) --- */

/* 文本行 */
.zuoekai-skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: var(--zuoekai-radius-sm);
}

.zuoekai-skeleton--text:last-child {
  margin-bottom: 0;
}

/* 圆形 (头像) */
.zuoekai-skeleton--circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/* 矩形 (卡片/图片) */
.zuoekai-skeleton--rect {
  width: 100%;
  height: 200px;
}

/* 标题 */
.zuoekai-skeleton--title {
  height: 24px;
  width: 50%;
  margin-bottom: 16px;
}

/* 按钮 */
.zuoekai-skeleton--button {
  height: 36px;
  width: 100px;
  border-radius: var(--zuoekai-radius-md);
}