@function range-track-get-fill($lowerFill, $upperFill) { ... }@function range-track-get-fill($lowerFill, $upperFill) { 
  // stylelint-disable-next-line scss/operator-no-newline-after
  @return linear-gradient($lowerFill, $lowerFill)
    list.slash(
      0,
      calc(
        0.5 * #{settings.$range-thumb-size} + var(--ratio) * (100% - #{settings.$range-thumb-size})
      )
    )
    100% no-repeat $upperFill;
 }

@mixin range-field() { ... }@mixin range-field() { 
  display: flex;
  flex-direction: column-reverse;
 }

@mixin range-control-native() { ... }@mixin range-control-native() { 
  appearance: none;
  background: transparent;
  width: 100%;
  margin: 0;
  padding: 0;

  // TRACK
  &::-webkit-slider-runnable-track {
    @include range-track(1);
  }

  &:disabled::-webkit-slider-runnable-track {
    @include range-track-fill-disabled;
  }

  // FIREFOX
  &::-moz-range-track {
    @include range-track;
  }

  &::-moz-range-progress {
    @include range-track-fill;
  }

  &:disabled::-moz-range-progress {
    @include range-track-fill-disabled;
  }

  // IE
  &::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: settings.$range-thumb-size 0;
    color: transparent;
    height: settings.$range-track-height;
  }

  &::-ms-fill-lower {
    @include range-track-ms-fill(1);
  }

  &::-ms-fill-upper {
    @include range-track-ms-fill;
  }

  // THUMB
  &::-webkit-slider-thumb {
    @include range-thumb;
  }

  &:disabled::-webkit-slider-thumb {
    @include range-thumb-disabled;
  }

  // FIREFOX
  &::-moz-range-thumb {
    @include range-thumb;
    @include range-thumb-moz;
  }

  &:disabled::-moz-range-thumb {
    @include range-thumb-disabled;
    @include range-thumb-moz;
  }

  // IE
  &::-ms-thumb {
    @include range-thumb;
    @include range-thumb-ie;
  }

  &:disabled::-ms-thumb {
    @include range-thumb-disabled;
  }

  // FOCUS STATE
  &::-moz-focus-outer {
    border: none;
  }

  &:focus {
    outline: none;

    &::-webkit-slider-thumb {
      @include range-thumb-focused;
    }

    // FIREFOX
    &::-moz-range-thumb {
      @include range-thumb-focused;
    }

    // IE
    &::-ms-thumb {
      @include range-thumb-focused;
    }
  }

  // ACTIVE STATE
  &:active:not(:disabled) {
    &::-webkit-slider-thumb {
      @include range-thumb;
    }

    // FIREFOX
    &::-moz-range-thumb {
      @include range-thumb;
      @include range-thumb-moz;
    }

    // IE
    &::-ms-thumb {
      @include range-thumb;
      @include range-thumb-ie;
    }
  }
 }

@mixin range-track($fill) { ... }@mixin range-track($fill) { 
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--val) - var(--min)) / var(--range));

  height: settings.$range-track-height;
  background: settings.$range-track-unfilled-color;
  border-radius: settings.$range-track-radius;

  @if $fill == 1 {
    background: functions.range-track-get-fill(
      settings.$range-track-filled-color,
      settings.$range-track-unfilled-color
    );
  }

  &:hover {
    cursor: pointer;
  }
 }

@mixin range-track-fill() { ... }@mixin range-track-fill() { 
  background: settings.$range-track-filled-color;
  border-radius: settings.$range-track-radius;
  height: settings.$range-track-height;
 }

@mixin range-track-fill-disabled() { ... }@mixin range-track-fill-disabled() { 
  &:hover {
    cursor: default;
  }
 }

@mixin range-thumb() { ... }@mixin range-thumb() { 
  border: settings.$range-thumb-border-size solid settings.$range-thumb-border-color;
  width: settings.$range-thumb-size;
  height: settings.$range-thumb-size;
  border-radius: 50%;
  background: settings.$range-thumb-color;
  transition: 0.2s border-color ease-out, 0.2s box-shadow ease-out;
  position: relative;
  bottom: math.div(settings.$range-thumb-size, 2.5);
  appearance: none;

  &:hover {
    @include range-thumb-focused;

    box-shadow: settings.$range-thumb-elevation;
    cursor: pointer;
  }

  &:active {
    background: settings.$range-thumb-border-color;
    bottom: math.div(settings.$range-thumb-size, 2.5);
    box-shadow: none;
  }
 }

@mixin range-thumb-ie() { ... }@mixin range-thumb-ie() { 
  width: math.div(settings.$range-thumb-size, 1.5);
  height: math.div(settings.$range-thumb-size, 1.5);
 }

@mixin range-thumb-moz() { ... }@mixin range-thumb-moz() { 
  width: math.div(settings.$range-thumb-size, 1.3);
  height: math.div(settings.$range-thumb-size, 1.3);
 }

@mixin range-thumb-focused() { ... }@mixin range-thumb-focused() { 
  outline: none;
  box-shadow: settings.$range-thumb-focused-border;
 }

@mixin range-thumb-disabled() { ... }@mixin range-thumb-disabled() { 
  @include range-thumb;

  &:hover {
    box-shadow: none;
    cursor: default;
  }

  &:active {
    background: settings.$range-thumb-color;
  }
 }

@mixin range-slider() { ... }@mixin range-slider() { 
  $native: #{$block}__native;

  display: flex;
  flex: {
    wrap: wrap;
    direction: row;
  }

  justify-content: space-between;

  #{$native} {
    padding-top: 0;
    padding-bottom: 0;
    margin: settings.$range-spacing 0 calc(#{settings.$range-spacing} * 2);
    order: -1;
  }

  &--horizontal {
    flex-wrap: nowrap;
    align-items: center;

    #{$native} {
      margin: 0;
      height: auto;
      order: 0;
    }

    #{$block}__mark-label {
      &:first-child,
      &:last-child {
        max-width: settings.$range-label-width;
      }

      &:first-child {
        margin-right: settings.$range-spacing;
      }

      &:last-child {
        margin-left: settings.$range-spacing;
      }
    }
  }

  &--disabled {
    opacity: settings.$range-disabled-opacity;
  }
 }

@mixin range-marks() { ... }@mixin range-marks() { 
  display: flex;
  justify-content: space-between;
  margin-top: settings.$range-spacing;
 }

@mixin range-mark-label() { ... }@mixin range-mark-label() { 
  color: settings.$range-marker-label-color;
  font-weight: settings.$range-marker-label-weight;
 }

@mixin range-label() { ... }@mixin range-label() { 
  margin-left: 0;
  margin-right: 0;
  margin-bottom: spacing.get('s1');
 }

$range-track-height: kib-core-dimensions-get(tiny) !default;

$range-track-radius: kib-core-dimensions-get(default) !default;

$range-track-filled-color: settings.$brand !default;

$range-track-unfilled-color: color.get('action', 'switch', 'background', 'on', '03') !default;

$range-thumb-size: kib-core-dimensions-get(default) * 1.75 !default;

$range-thumb-border-size: kib-core-dimensions-get(tiny) * 0.5 !default;

$range-thumb-border-color: settings.$brand !default;

$range-thumb-color: color.get('action', 'switch', 'foreground') !default;

$range-thumb-elevation: 0 unit.rem(1px 1px) rgba(0, 0, 0, 0.14),
  0 unit.rem(2px 1px -1px) rgba(0, 0, 0, 0.12), 0 unit.rem(1px 3px) rga(0, 0, 0, 0.2) !default;

$range-thumb-focused-border: 0 0 0 unit.rem(2px) $range-thumb-color,
  0 0 0 unit.rem(3px) $range-thumb-border-color !default;

$range-marker-label-color: color.get('text', 'primary') !default;

$range-marker-label-weight: $kib-type-weights-medium !default;

$range-disabled-opacity: 0.5 !default;

$range-spacing: spacing.get('s3') !default;

$range-label-width: unit.rem(38px) !default;