.stateBar {
  position: relative;
  width: 27px;
  height: 17px;
  border-radius: 20px;
  background-color: var(--checkbox-background);
  cursor: pointer;
  transition: .5s;
}

.stateBar.active {
  background-color: var(--checkbox-active-background);
}

.stateBar-indicator {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: var(--checkbox-indicator-background);
  transition: .5s;
}

.stateBar.active .stateBar-indicator {
  left: calc(100% - 15px);
}