/**
 * 分类展示色预置渐变（OKka 预览 + okgeceo 前台，改此处请同步 public/assets/okgeceo/css/group-color-gradients.css）
 * @author Telegram @okgeceo
 */

@keyframes ok-group-color-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.ok-catalog-color-swatch.ok-group-color-g-aurora,
.ok-group-color-g-aurora.ok-group-icon--class i,
.ok-group-color-g-aurora.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-aurora i,
.ok-price-display--category-color.ok-group-color-g-aurora .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-aurora .ok-price__amount {
  background: linear-gradient(120deg, #22d3ee, #6366f1, #a855f7, #22d3ee);
  background-size: 240% 240%;
  animation: ok-group-color-shift 5s ease infinite;
}

.ok-catalog-color-swatch.ok-group-color-g-sunset,
.ok-group-color-g-sunset.ok-group-icon--class i,
.ok-group-color-g-sunset.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-sunset i,
.ok-price-display--category-color.ok-group-color-g-sunset .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-sunset .ok-price__amount {
  background: linear-gradient(120deg, #f97316, #fb7185, #fbbf24, #f97316);
  background-size: 240% 240%;
  animation: ok-group-color-shift 4.5s ease infinite;
}

.ok-catalog-color-swatch.ok-group-color-g-ocean,
.ok-group-color-g-ocean.ok-group-icon--class i,
.ok-group-color-g-ocean.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-ocean i,
.ok-price-display--category-color.ok-group-color-g-ocean .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-ocean .ok-price__amount {
  background: linear-gradient(120deg, #0ea5e9, #06b6d4, #2563eb, #0ea5e9);
  background-size: 240% 240%;
  animation: ok-group-color-shift 5.5s ease infinite;
}

.ok-catalog-color-swatch.ok-group-color-g-ember,
.ok-group-color-g-ember.ok-group-icon--class i,
.ok-group-color-g-ember.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-ember i,
.ok-price-display--category-color.ok-group-color-g-ember .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-ember .ok-price__amount {
  background: linear-gradient(120deg, #ef4444, #f97316, #eab308, #ef4444);
  background-size: 240% 240%;
  animation: ok-group-color-shift 4s ease infinite;
}

.ok-catalog-color-swatch.ok-group-color-g-mint,
.ok-group-color-g-mint.ok-group-icon--class i,
.ok-group-color-g-mint.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-mint i,
.ok-price-display--category-color.ok-group-color-g-mint .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-mint .ok-price__amount {
  background: linear-gradient(120deg, #34d399, #2dd4bf, #22c55e, #34d399);
  background-size: 240% 240%;
  animation: ok-group-color-shift 5s ease infinite;
}

.ok-catalog-color-swatch.ok-group-color-g-violet,
.ok-group-color-g-violet.ok-group-icon--class i,
.ok-group-color-g-violet.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-violet i,
.ok-price-display--category-color.ok-group-color-g-violet .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-violet .ok-price__amount {
  background: linear-gradient(120deg, #8b5cf6, #d946ef, #6366f1, #8b5cf6);
  background-size: 240% 240%;
  animation: ok-group-color-shift 4.8s ease infinite;
}

.ok-catalog-color-swatch.ok-group-color-g-gold,
.ok-group-color-g-gold.ok-group-icon--class i,
.ok-group-color-g-gold.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-gold i,
.ok-price-display--category-color.ok-group-color-g-gold .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-gold .ok-price__amount {
  background: linear-gradient(120deg, #fbbf24, #f59e0b, #fde047, #fbbf24);
  background-size: 260% 260%;
  animation: ok-group-color-shift 3.8s ease infinite;
}

.ok-catalog-color-swatch.ok-group-color-g-neon,
.ok-group-color-g-neon.ok-group-icon--class i,
.ok-group-color-g-neon.ok-group-icon--letter,
.ok-catalog-icon-preview-gradient.ok-group-color-g-neon i,
.ok-price-display--category-color.ok-group-color-g-neon .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-neon .ok-price__amount {
  background: linear-gradient(120deg, #22d3ee, #e879f9, #4ade80, #22d3ee);
  background-size: 280% 280%;
  animation: ok-group-color-shift 3.2s linear infinite;
}

.ok-group-icon--class.ok-group-color-g-aurora i,
.ok-group-icon--class.ok-group-color-g-sunset i,
.ok-group-icon--class.ok-group-color-g-ocean i,
.ok-group-icon--class.ok-group-color-g-ember i,
.ok-group-icon--class.ok-group-color-g-mint i,
.ok-group-icon--class.ok-group-color-g-violet i,
.ok-group-icon--class.ok-group-color-g-gold i,
.ok-group-icon--class.ok-group-color-g-neon i,
.ok-group-icon--letter.ok-group-color-g-aurora,
.ok-group-icon--letter.ok-group-color-g-sunset,
.ok-group-icon--letter.ok-group-color-g-ocean,
.ok-group-icon--letter.ok-group-color-g-ember,
.ok-group-icon--letter.ok-group-color-g-mint,
.ok-group-icon--letter.ok-group-color-g-violet,
.ok-group-icon--letter.ok-group-color-g-gold,
.ok-group-icon--letter.ok-group-color-g-neon,
.ok-catalog-icon-preview-gradient.ok-group-color-g-aurora i,
.ok-catalog-icon-preview-gradient.ok-group-color-g-sunset i,
.ok-catalog-icon-preview-gradient.ok-group-color-g-ocean i,
.ok-catalog-icon-preview-gradient.ok-group-color-g-ember i,
.ok-catalog-icon-preview-gradient.ok-group-color-g-mint i,
.ok-catalog-icon-preview-gradient.ok-group-color-g-violet i,
.ok-catalog-icon-preview-gradient.ok-group-color-g-gold i,
.ok-catalog-icon-preview-gradient.ok-group-color-g-neon i,
.ok-price-display--category-color.ok-group-color-g-aurora .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-aurora .ok-price__amount,
.ok-price-display--category-color.ok-group-color-g-sunset .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-sunset .ok-price__amount,
.ok-price-display--category-color.ok-group-color-g-ocean .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-ocean .ok-price__amount,
.ok-price-display--category-color.ok-group-color-g-ember .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-ember .ok-price__amount,
.ok-price-display--category-color.ok-group-color-g-mint .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-mint .ok-price__amount,
.ok-price-display--category-color.ok-group-color-g-violet .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-violet .ok-price__amount,
.ok-price-display--category-color.ok-group-color-g-gold .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-gold .ok-price__amount,
.ok-price-display--category-color.ok-group-color-g-neon .ok-price__symbol,
.ok-price-display--category-color.ok-group-color-g-neon .ok-price__amount {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ok-catalog-icon-preview-gradient {
  display: inline-flex;
  background: transparent !important;
}

.ok-catalog-icon-preview-gradient i {
  font-size: 1.125rem;
}