// @import "../mixins/mixins";
// @import "../mixins/utils";
// @import "./input-number";
// @import "./tooltip";
// @import "../config/variables";

// @include b(slider) {
//   @include utils-clearfix;

//   @include e(runway) {
//     width: 100%;
//     height: $--slider-height;
//     margin: $--slider-margin;
//     background-color: $--slider-runway-background-color;
//     border-radius: $--slider-border-radius;
//     position: relative;
//     cursor: pointer;
//     vertical-align: middle;

//     &.show-input {
//       margin-right: 160px;
//       width: auto;
//     }

//     &.disabled {
//       cursor: default;

//       .el-slider__bar {
//         background-color: $--slider-disable-color;
//       }

//       .el-slider__button {
//         border-color: $--slider-disable-color;
//       }

//       .el-slider__button-wrapper {
//         &:hover,
//         &.hover {
//           cursor: not-allowed;
//         }

//         &.dragging {
//           cursor: not-allowed;
//         }
//       }

//       .el-slider__button {
//         &:hover,
//         &.hover,
//         &.dragging {
//           transform: scale(1);
//         }

//         &:hover,
//         &.hover {
//           cursor: not-allowed;
//         }

//         &.dragging {
//           cursor: not-allowed;
//         }
//       }
//     }
//   }

//   @include e(input) {
//     float: right;
//     margin-top: 3px;
//     width: 130px;

//     &.el-input-number--mini {
//       margin-top: 5px;
//     }

//     &.el-input-number--medium {
//       margin-top: 0;
//     }

//     &.el-input-number--large {
//       margin-top: -2px;
//     }
//   }

//   @include e(bar) {
//     height: $--slider-height;
//     background-color: $--slider-main-background-color;
//     border-top-left-radius: $--slider-border-radius;
//     border-bottom-left-radius: $--slider-border-radius;
//     position: absolute;
//   }

//   @include e(button-wrapper) {
//     height: $--slider-button-wrapper-size;
//     width: $--slider-button-wrapper-size;
//     position: absolute;
//     z-index: 1001;
//     top: $--slider-button-wrapper-offset;
//     transform: translateX(-50%);
//     background-color: transparent;
//     text-align: center;
//     user-select: none;
//     line-height: normal;
//     @include utils-vertical-center;

//     .el-tooltip {
//       vertical-align: middle;
//       display: inline-block;
//     }

//     &:hover,
//     &.hover {
//       cursor: grab;
//     }

//     &.dragging {
//       cursor: grabbing;
//     }
//   }

//   @include e(button) {
//     width: $--slider-button-size;
//     height: $--slider-button-size;
//     border: solid 2px $--slider-main-background-color;
//     background-color: $--color-white;
//     border-radius: 50%;
//     transition: .2s;
//     user-select: none;

//     &:hover,
//     &.hover,
//     &.dragging {
//       transform: scale(1.2);
//     }

//     &:hover,
//     &.hover {
//       cursor: grab;
//     }

//     &.dragging {
//       cursor: grabbing;
//     }
//   }

//   @include e(stop) {
//     position: absolute;
//     height: $--slider-height;
//     width: $--slider-height;
//     border-radius: $--border-radius-circle;
//     background-color: $--slider-stop-background-color;
//     transform: translateX(-50%);
//   }

//   @include when(vertical) {
//     position: relative;
//     .el-slider__runway {
//       width: $--slider-height;
//       height: 100%;
//       margin: 0 16px;
//     }
//     .el-slider__bar {
//       width: $--slider-height;
//       height: auto;
//       border-radius: 0 0 3px 3px;
//     }
//     .el-slider__button-wrapper {
//       top: auto;
//       left: $--slider-button-wrapper-offset;
//       transform: translateY(50%);
//     }
//     .el-slider__stop {
//       transform: translateY(50%);
//     }
//     &.el-slider--with-input {
//       padding-bottom: #{$--input-medium-height + 22px};
//       .el-slider__input {
//         overflow: visible;
//         float: none;
//         position: absolute;
//         bottom: 22px;
//         width: 36px;
//         margin-top: 15px;
//         .el-input__inner {
//           text-align: center;
//           padding-left: 5px;
//           padding-right: 5px;
//         }
//         .el-input-number__decrease,
//         .el-input-number__increase
//         {
//           top: $--input-small-height;
//           margin-top: -1px;
//           border: $--input-border;
//           line-height: 20px;
//           box-sizing: border-box;
//           transition: $--border-transition-base;
//         }
//         .el-input-number__decrease {
//           width: 18px;
//           right: 18px;
//           border-bottom-left-radius: $--input-border-radius;
//         }
//         .el-input-number__increase {
//           width: 19px;
//           border-bottom-right-radius: $--input-border-radius;
//           & ~ .el-input .el-input__inner {
//             border-bottom-left-radius: 0;
//             border-bottom-right-radius: 0;
//           }
//         }
//         &:hover {
//           .el-input-number__decrease,
//           .el-input-number__increase
//           {
//             border-color: $--input-hover-border;
//           }
//         }
//         &:active {
//           .el-input-number__decrease,
//           .el-input-number__increase
//           {
//             border-color: $--input-focus-border;
//           }
//         }
//       }
//     }
//   }
// }