.switcher {
  display: inline-block;
  position: relative;
  height: 18px;
  width: 36px;
  border-radius: 18px;
  margin-bottom: -4px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
  transition: all 250ms ease-in-out;
  background-color: #CCCCCC;
}

.switcher:active {
  opacity: .8;
}

.switcher:after {
  display: inline-block;
  content: ' ';
  float: left;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  margin-top: 4px;
  margin-left: 4px;
  background-color: #FFFFFF;
}

.switcher[data-enabled] {
  background-color: #66B833;
}

.switcher[data-enabled]:after {
  float: right;
  margin-left: 0;
  margin-right: 3px;
}

.switcher[data-disabled],
.switcher.disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
  background-color: #CCCCCC;
}