.x-toggle-light.x-toggle-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.x-toggle-light.x-toggle-btn::after {
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.x-toggle:checked + label > .x-toggle-light.x-toggle-btn {
  background: #9fd6ae;
}

.x-toggle-light.small {
  width: 3em;
  height: 1.6em;
}

.x-toggle-light.medium {
  width: 4em;
  height: 2.1em;
  padding: 3px;
}

.x-toggle-light.large {
  width: 4.7em;
  height: 2.1em;
  padding: 4px;
}