$switch-bar-bg: #fff !default;
$switch-bar-color: #ccc !default;
$switch-lever-bg: #f3f3f3 !default;
$switch-color-on: $valid-color !default;
$switch-color-off: $switch-lever-bg !default;


jb-switch .jb-switch {
  position: relative;
  cursor: pointer;
  display: inline-block;
  min-width: 95px;

  .switch-bar {  // Background bar
    display: inline-block;
    background: white;
    border: 1px solid $switch-bar-color;
    background: $switch-bar-bg;
    width: 45px;
    height: 15px;
    border-radius: 10px;
  }

  .switch-value {
    display: inline-block;
    position: relative;
    left: -15px;
    top: -2px;
    font-weight: bold;
  }

  .switch-lever {
    position: relative;
    top: 3px;
    display: inline-block;
    height: 23px;
    width: 23px;
    border-radius: 100%;
    box-shadow: 2px 2px 1px #D3D3D3;
    color: #FFF;
    background: $switch-lever-bg;

    left: -45px;
    transition: 400ms cubic-bezier(0.2, 0.30, 0, 1);
    transition-property: transform, background;
    &.is-on {
      transform: translateX(21px);
      background: $switch-color-on;
    }
    &.is-off { background: $switch-color-off; }
  }

  .switch-input { display: none; }

  &.is-disabled {
    cursor: not-allowed;
    .switch-bar   { background: #d4d4d4; }
    .switch-lever { background: #f3f3f3; }
  }

}


jb-switch .switch-label {
  &.horizontal {
    display: inline-block;
    margin-right: 15px;
    top: -3px;
    position: relative;
  }
}


jb-switch.form-fit {
  display: inline-block;
  margin-bottom: 17px;
  &.flat { margin-bottom: 2px; }
  .jb-switch { margin-top: 2px; }
}