.theme-switcher {
  position: relative !important;
  display: inline-block !important;
  background: white !important;
  height: 2.25rem !important;
  width: 4rem !important;
  vertical-align: middle !important;
  border-radius: 2rem !important;
  border: none;

  &:focus {
    outline: 0 !important;
    box-shadow: none !important;
  }
}

.theme-switcher::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background: #faf3ff;
  border-radius: 1.2rem;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  box-shadow: 0px 1px 3px #0003;
  transform: translateX(0rem);
  transition: .3s all;
}

.theme-toggle:checked + .theme-switcher {
  background: rgba(52, 43, 81, 0.9) !important;
}

.theme-toggle:checked + .theme-switcher::before {
  background: #514a6a;
  border: 1px solid #61597f;
  transform: translateX(1.75rem);
}