/* styles/toggle.css - Theme Toggle Styles */
.theme-toggle {
  width: clamp(40px, 7vw, 70px);
  height: clamp(22px, 3.4vw, 34px);
  background: linear-gradient(135deg, #87CEEB 0%, #1E90FF 100%);
  border-radius: 34px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  box-shadow: 0 4px 15px var(--shadow-light);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

[data-theme="dark"] .theme-toggle {
  background: linear-gradient(135deg, #191970 0%, #000033 100%);
}

.theme-toggle::before {
  content: "";
  position: absolute;
  width: clamp(18px, 2.6vw, 26px);
  height: clamp(18px, 2.6vw, 26px);
  background: var(--white);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .theme-toggle::before {
  transform: translateX(clamp(18px, 3.6vw, 36px));
  background: #FFD700;
}

.theme-icon {
  position: absolute;
  width: clamp(12px, 2.4vw, 24px);
  height: clamp(12px, 2.4vw, 24px);
  transition: opacity 0.3s ease;
}

.theme-icon.sun {
  top: 50%;
  left: clamp(24px, 3.6vw, 36px);
  transform: translateY(-50%);
}

.theme-icon.sun svg {
  width: 100%;
  height: 100%;
  fill: #ffd43b;
  animation: rotate 20s linear infinite;
}

.theme-icon.moon {
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

.theme-icon.moon svg {
  width: 100%;
  height: 100%;
  fill: #FFD700;
  animation: tilt 6s ease-in-out infinite;
}

.theme-icon.sun {
  opacity: 1;
}
.theme-icon.moon {
  opacity: 0;
}
[data-theme="dark"] .theme-icon.sun {
  opacity: 0;
}
[data-theme="dark"] .theme-icon.moon {
  opacity: 1;
}

.theme-toggle:hover {
  box-shadow: 0 6px 20px var(--shadow-dark);
  transform: scale(1.05);
}

.theme-toggle:active::before {
  transform: scale(0.9);
}

[data-theme="dark"] .theme-toggle:active::before {
  transform: translateX(clamp(18px, 3.6vw, 36px)) scale(0.9);
}

@keyframes rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes tilt {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.theme-toggle:focus {
  outline: 2px solid var(--secondary-light);
  outline-offset: 2px;
}