$placeholder-range-cursor
  box-shadow: $var-form__range-cursor-box-shadow

$placeholder-range-outline
  outline: 0 none;

--range-track()
  &::-webkit-slider-runnable-track
    {block}
  &::-moz-range-track
    {block}
  &::-ms-track
  &::-ms-fill-lower
  &::-ms-fill-upper
  &:focus::-webkit-slider-runnable-track
    {block}
  &:focus::-moz-range-track
    {block}
  &:focus::-ms-track
  &:focus::-ms-fill-lower
  &:focus::-ms-fill-upper
    {block}

{$class-input-range}
  @extend $full-width
  @extend $no-padding-xs
  appearance: none;
  border-radius: $var-form__range-border-radius unless $var-form__range-border-radius is false or is-ident($var-form__range-border-radius);
  height: $var-form__range-height unless $var-form__range-height is false or is-ident($var-form__range-height);
  margin: 18px 0;

{$class-input-range}:focus
  @extend $placeholder-range-outline
  box-shadow: 0 0 0 transparent;

{$class-input-range}::-webkit-slider-runnable-track
  @extend $full-width
  @extend $placeholder-range-cursor
  @extend $pointer
  animate: 0.2s;
  border-radius: $var-form__range-cursor-border-radius unless $var-form__range-cursor-border-radius is false or is-ident($var-form__range-cursor-border-radius);
  height: $var-form__range-track-height unless $var-form__range-track-height is false or is-ident($var-form__range-track-height);

{$class-input-range--black}
  @extend $scheme--black
  +--range-track()
    &
      background-color: $c--black
{$class-input-range--blue}
  @extend $scheme--blue
  +--range-track()
    &
      background-color: $c--blue
{$class-input-range--gray}
  @extend $scheme--gray
  +--range-track()
    &
      background-color: $c--gray
{$class-input-range--green}
  @extend $scheme--green
  +--range-track()
    &
      background-color: $c--green
{$class-input-range--orange}
  @extend $scheme--orange
  +--range-track()
    &
      background-color: $c--orange
{$class-input-range--purple}
  @extend $scheme--purple
  +--range-track()
    &
      background-color: $c--purple
{$class-input-range--red}
  @extend $scheme--red
  +--range-track()
    &
      background-color: $c--red
{$class-input-range--yellow}
  @extend $scheme--yellow
  +--range-track()
    &
      background-color: $c--yellow

{$class-input-range}::-webkit-slider-thumb
  @extend $placeholder-range-cursor
  @extend $pointer
  -webkit-appearance: none;
  background: #ffffff;
  border-radius: $var-form__range-cursor-border-radius unless $var-form__range-cursor-border-radius is false or is-ident($var-form__range-cursor-border-radius);
  border: $var-form__range-cursor-border;
  height: $var-form__range-thumb-height unless $var-form__range-height is false or is-ident($var-form__range-height);
  margin-top: - ($var-form__range-thumb-height / 3) unless $var-form__range-thumb-height is false or is-ident($var-form__range-thumb-height);
  width: ($var-form__range-thumb-height / 2) unless $var-form__range-thumb-height is false or is-ident($var-form__range-thumb-height);

{$class-input-range}::-moz-range-track
  @extend $full-width
  @extend $placeholder-range-cursor
  @extend $pointer
  animate: 0.2s;
  border-radius: 1.3px;
  height: $var-form__range-track-height unless $var-form__range-track-height is false or is-ident($var-form__range-track-height);

{$class-input-range}::-moz-range-thumb
  @extend $placeholder-range-cursor
  @extend $pointer
  background: #ffffff;
  border-radius: $var-form__range-cursor-border-radius unless $var-form__range-cursor-border-radius is false or is-ident($var-form__range-cursor-border-radius);
  border: $var-form__range-cursor-border;
  height: $var-form__range-thumb-height unless $var-form__range-height is false or is-ident($var-form__range-height);
  width: ($var-form__range-thumb-height / 2) unless $var-form__range-thumb-height is false or is-ident($var-form__range-thumb-height);

{$class-input-range}::-ms-track
  @extend $full-width
  @extend $pointer
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
  height: $var-form__range-track-height unless $var-form__range-track-height is false or is-ident($var-form__range-track-height);

{$class-input-range}::-ms-fill-lower
  @extend $placeholder-range-cursor
  border-radius: $var-form__range-cursor-border-radius unless $var-form__range-cursor-border-radius is false or is-ident($var-form__range-cursor-border-radius);

{$class-input-range}::-ms-fill-upper
  @extend $placeholder-range-cursor
  border-radius: $var-form__range-cursor-border-radius unless $var-form__range-cursor-border-radius is false or is-ident($var-form__range-cursor-border-radius);

{$class-input-range}::-ms-thumb
  @extend $placeholder-range-cursor
  @extend $pointer
  background: #ffffff;
  border-radius: $var-form__range-cursor-border-radius unless $var-form__range-cursor-border-radius is false or is-ident($var-form__range-cursor-border-radius);
  border: $var-form__range-cursor-border;
  height: $var-form__range-thumb-height unless $var-form__range-height is false or is-ident($var-form__range-height);
  width: ($var-form__range-thumb-height / 2) unless $var-form__range-thumb-height is false or is-ident($var-form__range-thumb-height);