@import 'styles/settings';
@import 'styles/functions';

:global {
  .rc-slider {
    position: relative;
    height: 16px;
    width: calc(100% - #{$space-1 * 2});
    padding: 5px 0;
    margin: 0 auto;
    -ms-touch-action: none;
        touch-action: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(palette(black), 0);

    .rc-slider-track {
      position: absolute;
      top: 50%;
      left: 0;
      height: 2px;
      transform: translate(0, -50%);
    }

    .rc-slider-dot {
      display: none;
    }

    // themes
    &.-light {
      .rc-slider-rail {
        &:before {
          border-color: palette(blue, light);
        }
      }

      .rc-slider-track {
        background-color: palette(blue, light);
      }

      .rc-slider-handle {
        border-color: palette(blue, secondary);
        background-color: palette(blue);

        &:before {
          background: palette(blue, secondary);
        }
      }
    }

    &.-dark {
      .rc-slider-rail {
        &:before {
          border-color: palette(gray, dark);
        }
      }

      .rc-slider-track {
        background-color: palette(gray, dark);
      }

      .rc-slider-handle {
        width: 16px;
        height: 16px;
        margin: 0;
        border-color: palette(gray, dark);
        background-color: palette(sand);

        &:before {
          background-color: palette(gray, dark);
        }
      }
    }

    &.-colorful {
      .rc-slider-rail {
        height: 5px;

        &:before {
          display: none;
        }
      }

      .rc-slider-track {
        display: none;
      }
    }
  }

  .-disabled {
    pointer-events: none;
    opacity: .5;
  }

  .rc-slider * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(palette(black), 0);
  }

  .rc-slider-rail {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 3px;
    transform: translate(0, -50%);

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 1px;
      border-top: 1px dashed;
      transform: translate(0, -50%);
    }
  }

  .rc-slider-mark {
    display: none;
  }

  .rc-slider-handle {
    position: absolute;
    top: 50%;
    transform: translate(-8px, -50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: grab;
    border-radius: 50%;
    border: 1px solid;
    -ms-touch-action: pan-x;
        touch-action: pan-x;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}