<commit_before>
.mui-slider {

  @mixin handle-size($size) {
    width: $size;
    height: $size;
  }

  $fill-gutter: $slider-handle-size-disabled - $slider-track-size;

  -webkit-touch-callout: none;
  cursor: default;
  height: $slider-handle-size-active;
  position: relative;


  .mui-slider-track {
    position: absolute;
    top: ($slider-handle-size-active - $slider-track-size) / 2;
    left: 0;
    width: 100%;
    height: $slider-track-size;
  }

  .mui-slider-selection {
    position: absolute;
    top: 0;
    height: 100%;

    .mui-slider-selection-fill {
      height: 100%;
      @include ease-out($property: margin);
    }
  }

  .mui-slider-selection-low {
    left: 0;

    .mui-slider-selection-fill {
      background-color: $slider-selection-color;
      margin-right: $fill-gutter;
    }
  }

  .mui-slider-selection-high {
    right: 0;

    .mui-slider-selection-fill {
      background-color: $slider-track-color;
      margin-left: $fill-gutter;
    }
  }

  .mui-slider-handle {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 1;
    margin: ($slider-track-size / 2) 0 0 0;

    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
      border 450ms $ease-out-function,
      width 450ms $ease-out-function,
      height 450ms $ease-out-function;

    @include handle-size($slider-handle-size);

    &:focus {
      outline: none;
    }
  }

  &:not(.mui-disabled) {
    .mui-slider-handle {
      border: 0px solid transparent;
      background-color: $slider-selection-color;
      &:active {
        @include handle-size($slider-handle-size-active);
      }
    }

    &:hover, &:focus {
      .mui-slider-selection-high {
        .mui-slider-selection-fill {
          background: $slider-track-color-selected;
        }
      }

      &:not(.mui-slider-zero) {
        .mui-slider-handle:not(:active) {
          border: $slider-handle-size solid fade($slider-selection-color, 20%);
          @include handle-size($slider-handle-size-active + $slider-handle-size);
        }
      }
    }

    &.mui-slider-zero {
      .mui-slider-handle {
        border: $slider-track-size solid $slider-track-color;
        background-color: transparent;
        box-shadow: none;

        &:active {
          border-color: $slider-track-color-selected;
          width: $slider-handle-size-active !important;
          height: $slider-handle-size-active !important;
          transition:<commit_msg>Fix slider background-clip #16<commit_after>
.mui-slider {

  @mixin handle-size($size) {
    width: $size;
    height: $size;
  }

  $fill-gutter: $slider-handle-size-disabled - $slider-track-size;

  -webkit-touch-callout: none;
  cursor: default;
  height: $slider-handle-size-active;
  position: relative;


  .mui-slider-track {
    position: absolute;
    top: ($slider-handle-size-active - $slider-track-size) / 2;
    left: 0;
    width: 100%;
    height: $slider-track-size;
  }

  .mui-slider-selection {
    position: absolute;
    top: 0;
    height: 100%;

    .mui-slider-selection-fill {
      height: 100%;
      @include ease-out($property: margin);
    }
  }

  .mui-slider-selection-low {
    left: 0;

    .mui-slider-selection-fill {
      background-color: $slider-selection-color;
      margin-right: $fill-gutter;
    }
  }

  .mui-slider-selection-high {
    right: 0;

    .mui-slider-selection-fill {
      background-color: $slider-track-color;
      margin-left: $fill-gutter;
    }
  }

  .mui-slider-handle {
    background-clip: padding-box;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 1;
    margin: ($slider-track-size / 2) 0 0 0;

    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
      border 450ms $ease-out-function,
      width 450ms $ease-out-function,
      height 450ms $ease-out-function;

    @include handle-size($slider-handle-size);

    &:focus {
      outline: none;
    }
  }

  &:not(.mui-disabled) {
    .mui-slider-handle {
      border: 0px solid transparent;
      background-color: $slider-selection-color;
      &:active {
        @include handle-size($slider-handle-size-active);
      }
    }

    &:hover, &:focus {
      .mui-slider-selection-high {
        .mui-slider-selection-fill {
          background: $slider-track-color-selected;
        }
      }

      &:not(.mui-slider-zero) {
        .mui-slider-handle:not(:active) {
          border: $slider-handle-size solid rgba($slider-selection-color, 0.2);
          @include handle-size($slider-handle-size-active + $slider-handle-size);
        }
      }
    }

    &.mui-slider-zero {
      .mui-slider-handle {
        border: $slider-track-size solid $slider-track-color;
        background-color: transparent;
        box-shadow: none;

        &:active {
          border-color: $slider-track-color-selected;
          width: $slider-handle-size-active !important;
          height: $slider-handle-size-active !important;
          transition:
{'fraction_non_alphanumeric': 0.14789714969105042, 'fraction_numerical': 0.015945784333266894, 'mean_word_length': 2.1799746514575413, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5654950', 'n_tokens_mistral': 1797, 'n_tokens_neox': 1672, 'n_words': 294}