/*------------------------------------
  Slider v3
------------------------------------*/

.u-slider--v3 {
  &.ui-slider {
    position: relative;
    @include px-to-rem(height, 10px);
    background: $g-color-gray-light-v4;
    border: none;
    border-radius: 5px;
    @include px-to-rem(margin-top, 12px);
    @include px-to-rem(margin-left, 6px);
    @include px-to-rem(margin-right, 6px);

    .ui-slider-range {
      height: 100%;
      border-radius: 5px;
    }

    .ui-slider-handle {
      position: absolute;
      top: 50%;
      border: none;
      outline: none;
      background: $g-color-white;
      @include px-to-rem(width, 20px);
      @include px-to-rem(height, 20px);
      box-shadow: 0 4px 6px 0 rgba($g-color-black, .1);
      border-radius: 50%;
      cursor: pointer;
      @include px-to-rem(margin-top, -10px);
      @include px-to-rem(margin-left, -10px);
      transition-property: border-color;
      transition-duration: .3s;
      transition-timing-function: ease;
    }

    .ui-slider-range {
      background: linear-gradient(90deg, $g-color-lightblue-v7 0%, $g-color-darkblue-v2 100%);
    }

    &.ui-slider-content {
      background: $g-color-gray-light-v5;
    }
  }
}