.dark-toggle {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  height: 32px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.dark-toggle:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.dark-toggle:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fffbea;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.dark-toggle:after {
  content: "\f185";
  position: absolute;
  left: 15px;
  top: 50%;
  color: #c58a00;
  font-size: 12px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.dark-toggle:checked {
  border-color: rgba(198, 236, 110, 0.6);
  background: rgba(198, 236, 110, 0.22);
}

.dark-toggle:checked:before {
  transform: translateX(26px);
  background: #e9f6c8;
}

.dark-toggle:checked:after {
  content: "\f186";
  color: #2a4a1a;
  transform: translate(calc(-50% + 26px), -50%);
}

.dark-toggle:focus-visible {
  outline: 2px solid #c6ec6e;
  outline-offset: 3px;
}

/*# sourceMappingURL=dark-toggle.css.map */