@import '../jnt-variables';
@import '../jnt-functions';

$slider-height: 16px;
$slided-height: 4px;
[host=jnt-slider-host] {
  display: flex;
  align-items: center;
  height: $slider-height;
  width: 100%;
  position: relative;
}
[data-slided][child-of=jnt-slider-host] {
  position: absolute;
  left: 0;
  width: 0;
  height: $slided-height;
  background: $jnt-primary-color;
}
[data-pointer][child-of=jnt-slider-host] {
  position: relative;
  left: 0;
  width: $slider-height;
  height: $slider-height;
  border-radius: 50%;
  z-index: 1;
  background-color: $jnt-primary-color;
}
form[child-of=jnt-slider-host] {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: 2;
  input[child-of=jnt-slider-host] {
    height: 100%;
    width: 100%;
    margin: auto;
    padding: 0;
    cursor: pointer;
    &[type=range]::-moz-range-thumb[child-of=jnt-slider-host] {
      background: $jnt-white-color;
    }
  }
}