start-at-root/react-breeze-form

@import '~compass-mixins/lib/compass/css3/border-radius';
@import '~compass-mixins/lib/compass/css3/images';
@import '~compass-mixins/lib/compass/css3/transition';
@import '~compass-mixins/lib/compass/css3/transform';
@import './custom_colors';
@import './flat_ui_colors';

.rbf-switch {
  display: inline-block;
  height: 34px;
  margin: 0 20px;
  position: relative;
  width: 60px;

  input {
    height: 0;
    opacity: 0;
    width: 0;
  }
}

.rbf-slider {
  @include transition(delay, 0.4s);

  background-color: $bootstrap-gray-bg;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  &::before {
    @include transition(delay, 0.4s);

    background-color: $rbf-white;
    bottom: 4px;
    content: '';
    height: 26px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    width: 26px;
  }
}

input {
  &:checked + .rbf-slider {
    @include background-image(linear-gradient(to right, $rbf-purple, $rbf-bluegreen));
  }

  &:focus + .rbf-slider {
    box-shadow: 0 0 1px $flat-belize-hole;
  }

  &:checked + .rbf-slider::before {
    @include transform(translateX(26px));
  }
}

/* Rounded rbf-sliders */
.rbf-slider.round {
  @include border-radius(34px);

  &::before {
    @include border-radius(50%);
  }
}

.rbf-slider-label.off {
  color: $rbf-black;
  position: absolute;
  right: 7px;
  top: 6px;
}

.rbf-slider-label.on {
  color: $rbf-white;
  left: 7px;
  position: absolute;
  top: 6px;
}

.rbf-toggle-placeholder {
  display: inline-block;
  margin: -20px 0 0;
  vertical-align: middle;
}