:root {
  --light: #000000;
  --dark: #ffffff;
  --ball: 15px;
  --top: 3px;
  --margin: 4px;
}

.checkbox-switcher {
  display: none;
  -webkit-appearance: none;
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  display: block;
  position: relative;
  width: 45px;
  height: 25px;
  cursor: pointer;
  transition: all 0.7s ease-out;
}

.slider-toggle {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--dark);
  transition: all 0.5s ease-out;
  border-radius: 30px;
  border: 2px solid var(--light);
}

.slider-toggle::after {
  position: absolute;
  content: '';
  width: var(--ball);
  height: var(--ball);
  background-color: var(--light);
  border-radius: 70px;
  top: var(--top);
  right: var(--margin);
  transition: all 0.5s ease-out;
}

.checkbox-switcher:checked + .slider-toggle {
  background-color: var(--light);
  border: 2px solid var(--dark);
}

.checkbox-switcher:checked + .slider-toggle::after {
  right: calc(100% - var(--margin));
  transform: translateX(100%);
}

.checkbox-switcher:checked + .slider-toggle::after {
  content: '';
  position: absolute;
  background-color: var(--dark);
}

.sun::after,
.moon::after {
  content: '';
  position: absolute;
  top: var(--top);
  width: var(--ball);
  height: var(--ball);
}

.moon::after {
  background-image: url('../images/icons/moon.svg');
  left: var(--margin);
}

.sun::after {
  background-image: url('../images/icons/sun.svg');
  right: var(--margin);
}