text: @import '../../variables';
  @import '../../mixins';
  
  .slider-container {
    position: relative;
  
    .slider {
      position: relative;
      height: 16px;
  
      .bar {
        top: 7px;
        height: 2px;
  
      }
  
      .bar-0 {
        background: $navy;
      }
  
      .bar-1 {
        background: $lightgray;
      }
      .handle {
        position: absolute;
        background: $peach;
        width: 16px;
        height: 16px;
        border-radius: 25px;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
      }
    }
  
    &.with-midpoint .slider .bar {
      background: $lightgray;
    }
  
    &.with-orange-handle .slider .handle {
      background: $orange;
    }
  
    .slider-midpoint {
      @include centered;
      z-index: -1;
      width: 1px;
      height: 7px;
      background: $lightgray;
    }
  }
  