.bui-slider {
  --line-color: var(--bui-slider-line-color, var(--bui-color-primary));
  --line-bg-color: var(--bui-slider-line-bg-color, var(--bui-color-border-default));
  --width: var(--bui-slider-width, 100%);
  --height: var(--bui-slider-height, 2px);
  --padding: var(--bui-slider-padding, 19px 0);
  --button-width: var(--bui-slider-button-width, 26px);
  --button-height: var(--bui-slider-button-height, 26px);
  --button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
  --button-border-radius: var(--bui-slider-button-border-radius, 50%);
  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
  --tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
  --tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
  --tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
  position: relative;
  width: var(--width);
  height: var(--height);
  padding: var(--padding);
  box-sizing: border-box;
  font-family: var(--bui-font-family);
}
.bui-slider-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.bui-slider-line {
  position: absolute;
  top: 50%;
  left: 0;
  height: var(--height);
  transform: translateY(-50%);
  background-color: var(--line-color);
}
.bui-slider-rail {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--height);
  transform: translateY(-50%);
  background-color: var(--line-bg-color);
}
.bui-slider-button {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: var(--button-width);
  height: var(--button-height);
  background-color: var(--bui-color-white);
  box-shadow: #ddd 0 0 10px;
  border-radius: var(--button-border-radius);
  transform: translate(-50%, -50%);
  font-size: var(--bui-title-size-3);
  cursor: grab;
}
.bui-slider-button::after {
  position: absolute;
  content: "";
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}
.bui-slider-button-0 {
  left: 0%;
  top: 50%;
  z-index: var(--bui-z-index-affix);
}
.bui-slider-button-1 {
  left: 0%;
  top: 50%;
  z-index: var(--bui-z-index-affix);
}
.bui-slider-tooltip {
  position: absolute;
  top: -14px;
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  line-height: var(--tooltip-line-height);
  font-size: var(--tooltip-font-size);
  border-radius: var(--tooltip-border-radius);
  color: var(--tooltip-color);
  text-align: center;
  background-color: var(--tooltip-bg-color);
  transform: translate(-50%, -50%);
  z-index: var(--bui-z-index-popover);
}
.bui-slider-tooltip::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 6px solid var(--tooltip-bg-color);
}
.bui-slider-tooltip-hidden {
  display: none;
}