/* Theme switcher - Moon/Sun toggle styles */

/* Theme switcher container */
.theme-switcher-wrapper {
  position: relative;
  width: 2.5rem !important;
  height: 1.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Moon style (unchecked) */
.theme-switcher-wrapper .toggle-label {

/* Style the label that acts as the background */
  transition: background-color 0.3s ease;
  z-index: 10;
  background-color: #475569; /* Slate color */
  border-radius: 9999px;

  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: #dbeafe;
  border: 2px solid #93c5fd;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Create clean half-moon using pseudo-elements */
.theme-switcher-wrapper .toggle-label::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #1e293b; /* Dark background (night sky) */
  z-index: -1;
}

.theme-switcher-wrapper .toggle-label::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 45%; /* Position for half-moon effect */
  width: 1.2rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #94a3b8; /* Light gray for the illuminated half */
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 0;
}

/* Hide the crescent overlay when checked (sun mode) */
.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label::before {
  background-color: transparent;
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label::after {
  transform: translateX(100%);
  opacity: 0;
}

/* Sun style (checked) */
.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label {
  background-color: #fcd34d;
  border-color: #f59e0b;
}

/* Moon craters - hide when checked */
.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .moon-crater {
  opacity: 0;
}

/* Sun rays - show when checked */
.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray {
  opacity: 1;
  transform: scale(1);
}

.sun-ray {
  position: absolute;
  background-color: #f59e0b;
  border-radius: 2px; /* Make rays more rectangular */
  opacity: 0;
  transform: scale(0);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  box-shadow: 0 0 5px #fcd34d; /* Add glow to rays */
}

/* Moon craters */
.moon-crater {
  position: absolute;
  border-radius: 9999px;
  background-color: #d1d5db;
  opacity: 0.75;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.moon-crater:nth-child(1) {
  top: 0.25rem;
  left: 0.25rem;
  width: 0.25rem;
  height: 0.25rem;
}

.moon-crater:nth-child(2) {
  bottom: 0.25rem;
  right: 0.5rem;
  width: 0.375rem;
  height: 0.375rem;
}

.moon-crater:nth-child(3) {
  top: 0.75rem;
  right: 0.25rem;
  width: 0.25rem;
  height: 0.25rem;
}

/* Sun rays positioning */
.sun-ray:nth-child(4) {
  height: 0.375rem;
  width: 0.125rem;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%) scale(0);
}

.sun-ray:nth-child(5) {
  height: 0.375rem;
  width: 0.125rem;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%) scale(0);
}

.sun-ray:nth-child(6) {
  height: 0.125rem;
  width: 0.375rem;
  top: 50%;
  left: -0.25rem;
  transform: translateY(-50%) scale(0);
}

.sun-ray:nth-child(7) {
  height: 0.125rem;
  width: 0.375rem;
  top: 50%;
  right: -0.25rem;
  transform: translateY(-50%) scale(0);
}

/* Diagonal rays */
.sun-ray:nth-child(8) {
  height: 0.25rem;
  width: 0.25rem;
  top: -0.125rem;
  left: -0.125rem;
  transform: rotate(45deg) scale(0);
}

.sun-ray:nth-child(9) {
  height: 0.25rem;
  width: 0.25rem;
  top: -0.125rem;
  right: -0.125rem;
  transform: rotate(45deg) scale(0);
}

.sun-ray:nth-child(10) {
  height: 0.25rem;
  width: 0.25rem;
  bottom: -0.125rem;
  left: -0.125rem;
  transform: rotate(45deg) scale(0);
}

.sun-ray:nth-child(11) {
  height: 0.25rem;
  width: 0.25rem;
  bottom: -0.125rem;
  right: -0.125rem;
  transform: rotate(45deg) scale(0);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray {
  transform: scale(1);
}

/* Fix positioning for diagonal rays when checked */
.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(4) {
  transform: translateX(-50%) scale(1);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(5) {
  transform: translateX(-50%) scale(1);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(6) {
  transform: translateY(-50%) scale(1);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(7) {
  transform: translateY(-50%) scale(1);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(8) {
  transform: rotate(45deg) scale(1);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(9) {
  transform: rotate(45deg) scale(1);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(10) {
  transform: rotate(45deg) scale(1);
}

.theme-switcher-wrapper .toggle-checkbox:checked + .toggle-label .sun-ray:nth-child(11) {
  transform: rotate(45deg) scale(1);
}