.switch {
  position: relative;
  height: 18px;
  width: 150px;
  background: var(--background-1);
  border: 1px #333 solid;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  display: flex;
}

.switch-label {
  position: relative;
  z-index: 2;
  width: 50%;
  line-height: 18px;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
}
.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}

.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  transition: 0.15s ease-out;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 49.5%;
}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 1px;
  width: 50.5%;
  height: 15px;
  background: var(--zing-background);
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease-out;
}
.switch-blue .switch-selection {
  background: #3aa2d0;
  background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
  background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
  background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
  background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
}
.switch-yellow .switch-selection {
  background: #c4bb61;
  background-image: -webkit-linear-gradient(top, #e0dd94, #c4bb61);
  background-image: -moz-linear-gradient(top, #e0dd94, #c4bb61);
  background-image: -o-linear-gradient(top, #e0dd94, #c4bb61);
  background-image: linear-gradient(to bottom, #e0dd94, #c4bb61);
}

/* 3-option switch variant */
.switch-3 .switch-label {
  width: 33.33%;
}
.switch-3 .switch-selection {
  width: 33.34%;
}
.switch-input.mid:checked ~ .switch-selection {
  left: 33.33%;
}
.switch-input.right:checked ~ .switch-selection {
  left: 66.66%;
}