/**
 * Theme Preview Dots CSS
 * 
 * Styles for color dot indicators in theme picker
 */

.theme-preview-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: 8px;
}

.theme-preview-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Summer theme dots */
.theme-summer .theme-preview-dot:nth-child(1) {
  background-color: #FF9F40;
}
.theme-summer .theme-preview-dot:nth-child(2) {
  background-color: #FFD93D;
}
.theme-summer .theme-preview-dot:nth-child(3) {
  background-color: #6BCF7F;
}

/* Autumn theme dots */
.theme-autumn .theme-preview-dot:nth-child(1) {
  background-color: #E67E22;
}
.theme-autumn .theme-preview-dot:nth-child(2) {
  background-color: #C0392B;
}
.theme-autumn .theme-preview-dot:nth-child(3) {
  background-color: #8B4513;
}

/* Winter theme dots */
.theme-winter .theme-preview-dot:nth-child(1) {
  background-color: #3498DB;
}
.theme-winter .theme-preview-dot:nth-child(2) {
  background-color: #BDC3C7;
}
.theme-winter .theme-preview-dot:nth-child(3) {
  background-color: #E8EFF5;
}

/* Spring theme dots */
.theme-spring .theme-preview-dot:nth-child(1) {
  background-color: #27AE60;
}
.theme-spring .theme-preview-dot:nth-child(2) {
  background-color: #FF6B9D;
}
.theme-spring .theme-preview-dot:nth-child(3) {
  background-color: #C7CEEA;
}

/* Active theme button styling */
.theme-option-btn.active {
  border: 2px solid var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

/* Mode toggle active state */
.mode-toggle-btn.active {
  background-color: var(--bs-primary);
  color: white;
  border-color: var(--bs-primary);
}