$slider_bg: $white !default;
$slider_color_default: $light !default;
$slider_color_primary: $primary_color !default;

jb-slider {
  display: block;
  padding: 0 30px 20px 30px;
  jb-label { margin-left: -30px; }
  ng5-slider {
    &.ng5-slider {
      margin-bottom: 25px;
      .ng5-slider-bubble { font-size: $font-size-base; } // 14px
      .ng5-slider-inner-tooltip {
        font-size: ($font-size-base * 0.86); // ~12px
        color: $optional-color;
      }
      .ng5-slider-pointer {
        background-color: $slider_color_primary;
        outline: 0 none;
        &.ng5-slider-active:after {
          background-color: $slider_bg;
        }
      }
      .ng5-slider-selection, .ng5-slider-tick.ng5-slider-selected {
        background: $slider_color_primary;
      }

      &.showOuterSelection {
        .ng5-slider-tick {
          background: $slider_color_primary;
        }
        .ng5-slider-selection, .ng5-slider-tick.ng5-slider-selected {
          background: $slider_color_default;
        }
        .ng5-slider-right-out-selection, .ng5-slider-left-out-selection {
          .ng5-slider-bar {
            background: $slider_color_primary;
          }
        }
      }

    }
  }
}