@import url(App/config.css);

input[type=range] {
  -webkit-appearance: none;
}
input[type=range]::-moz-focus-outer {
  border: 0;
}

.ad-Range {
  display: flex;
  align-items: center;
  width: 100%;
}
  .ad-Range-input {
    width: 100%;
    height: 8px;
    margin: 0;
    margin-right: .5rem;
    border-radius: 30px;
    background: color(var(--ad-Color-prim) l(+6%));
  }
  .ad-Range-input:focus {
    outline: 0;
    background: color(var(--ad-Color-prim) l(+12%));
  }

  /* Track */
  .ad-Range-input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: none;
  }
  .ad-Range-input::-moz-range-track {
    -moz-appearance: none;
    background: none;
  }
  .ad-Range-input::-ms-track {
    background: none;
  }

  /* Thumb */
  .ad-Range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 4px solid #fff;
    background: color(var(--ad-Color-prim) l(+6%));
    border-radius: 50%;
    cursor: ew-resize;
    transition: border .2s;
  }
  .ad-Range-input::-moz-range-thumb {
    -moz-appearance: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    background: color(var(--ad-Color-prim) l(+6%));
    border-radius: 50%;
    cursor: ew-resize;
    transition: border .2s;
  }
  .ad-Range-input::-ms-thumb {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    background: color(var(--ad-Color-prim) l(+6%));
    border-radius: 50%;
    cursor: ew-resize;
    transition: border .2s;
  }
  .ad-Range-input:focus::-webkit-slider-thumb,
  .ad-Range-input:hover::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-color: var(--ad-Color-sec);
  }
  .ad-Range-input:focus::-moz-range-thumb,
  .ad-Range-input:hover::-moz-range-thumb {
    -moz-appearance: none;
    border-color: var(--ad-Color-sec);
  }
  .ad-Range-input:focus::-ms-thumb,
  .ad-Range-input:hover::-ms-thumb {
    border-color: var(--ad-Color-sec);
  }
  .ad-Range-input:focus::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: color(var(--ad-Color-prim) l(+12%));
  }
  .ad-Range-input:focus::-moz-range-thumb {
    -moz-appearance: none;
    background: color(var(--ad-Color-prim) l(+12%));
  }
  .ad-Range-input:focus::-ms-thumb {
    background: color(var(--ad-Color-prim) l(+12%));
  }
