/* Category Label Colors 
 * This file defines the background colors for different course categories
 */

:root {
  /* Default color */
  --color-default: rgb(107, 107, 250); /* Blue */

  /* Main category colors */
  --color-dark-grey: #333333;               /* Dark Grey */
  --color-red: rgb(255, 0, 0);      /* Red */
  --color-green: #4CAF50;                /* Green */
  --color-yellow: rgb(230, 204, 0);       /* Yellow */
  --color-indigo: indigo;              /* Indigo */
  --color-purple: #9C27B0;     /* Purple */
  --color-pink: #FF4081;          /* Pink */
}

/* Default label style */
.course-label {
  font-size: 13px;
  padding: 0.2vw 1vw;
  border-radius: 1.38vw;
  color: white;
  font-weight: 600;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  margin-top: 1rem
}

/* Animation Category */
.course-label[data-category="Animation"],
.course-label[data-category="動畫"],
.course-label[data-category="动画片"] {
  background-color: var(--color-default);
}

/* Meta Category */
.course-label[data-category="Meta"],
.course-label[data-category="元宇宙"] {
  background-color: var(--color-dark-grey);
}

/* Web3 Category */
.course-label[data-category="Web3"],
.course-label[data-category="網路"],
.course-label[data-category="网络"] {
  background-color: var(--color-red);
}


/* AI Category */
.course-label[data-category="AI"],
.course-label[data-category="人工智能"] {
  background-color: var(--color-green);
}

/* Game Production */
.course-label[data-category="Game Production"],
.course-label[data-category="遊戲製作"],
.course-label[data-category="游戏制作"] {
  background-color: var(--color-yellow);
}

/* 3D */
.course-label[data-category="3D"] {
  background-color: var(--color-indigo);
}

/* Business */
.course-label[data-category="Business"],
.course-label[data-category="商業"],
.course-label[data-category="商业"] {
  background-color: var(--color-purple);
}

/* Graphic Design Category */
.course-label[data-category="Graphic Design"],
.course-label[data-category="平面設計"],
.course-label[data-category="平面设计"] {
  background-color: var(--color-pink);
}

/* Illustration */
.course-label[data-category="Illustration"],
.course-label[data-category="插畫"],
.course-label[data-category="插图"] {
  background-color: var(--color-default);
}

/* UX/UI */
.course-label[data-category="UX/UI"],
.course-label[data-category="使用者介面/使用者體驗"],
.course-label[data-category="用户界面/用户体验"] {
  background-color: var(--color-dark-grey);
}

/* OLE */
.course-label[data-category="OLE"],
.course-label[data-category="奧萊"],
.course-label[data-category="奥莱"] {
  background-color: var(--color-red);
}

/* Video Post - production */
.course-label[data-category="Video Post-production"],
.course-label[data-category="影片後製"],
.course-label[data-category="视频后期制作"] {
  background-color: var(--color-green);
}

/* Default for other categories */
.course-label:not([data-category]) {
  background-color: var(--color-default);
}