@import '../index.less';
@btri-slider-box: ~'@{ant-prefix}-btri-slider-box';

.@{btri-slider-box} {
  &.@{ant-prefix}-slider.@{ant-prefix}-slider-vertical
    .@{ant-prefix}-slider-handle {
    margin-left: -7px;
  }
  &.@{ant-prefix}-slider-disabled .@{ant-prefix}-slider-rail {
    background-color: var(--gray-blue-4) !important;
  }
  &.@{ant-prefix}-slider.@{ant-prefix}-slider-horizontal
    .@{ant-prefix}-slider-dot {
    top: 13px;
    width: 1px;
    height: 4px;
    background-color: var(--border-1);
    border: none;
    border-radius: none;
  }
  &.@{ant-prefix}-slider.@{ant-prefix}-slider-vertical
    .@{ant-prefix}-slider-dot {
    width: 4px;
    height: 1px;
    background-color: var(--border-1);
    border: none;
    border-radius: none;
    margin-left: 11px;
  }
  .@{ant-prefix}-slider-mark {
    font-size: var(--font-size-sm);
  }
  .@{ant-prefix}-slider-mark-text {
    color: var(--caption-font);
  }
  &.@{ant-prefix}-slider.@{ant-prefix}-slider-horizontal
    .@{ant-prefix}-slider-mark {
    top: 21px;
  }
  &.@{ant-prefix}-slider.@{ant-prefix}-slider-vertical
    .@{ant-prefix}-slider-mark {
    left: 20px;
  }
  &.@{ant-prefix}-slider .@{ant-prefix}-slider-rail {
    background-color: var(--slider-rail-bg);
  }
  &.@{ant-prefix}-slider:hover .@{ant-prefix}-slider-rail {
    background-color: var(--slider-rail-bg);
  }

  &.@{ant-prefix}-slider .@{ant-prefix}-slider-handle {
    background-color: var(--white);
  }
}