@import "../../../index.less";

.bi-single-slider-button {
  transform: translateX(-50%);
  cursor: ew-resize;
  border-width: 2px;
  border-style: solid;
  .border-radius(50%);
  background-color: @color-bi-background-slider-button;

  &:hover, &.hover {
    background-color: @color-bi-background-hover-slider-button;
    transform: scale(1.2) translateX(-50%);
    .box-shadow(0 2px 4px 1px, rgba(0, 35, 11, 20%));
  }

  &.disabled {
    border-color: @color-bi-border-disabled-slider-button;

    &:hover, &.hover {
      background-color: @color-bi-background-hover-disabled-slider-button;
    }
  }

}

.bi-theme-dark {
  .bi-single-slider-button {
      background-color: @color-bi-background-slider-button;
      &:hover, &.hover {
        background-color: @color-bi-background-hover-slider-button-theme-dark;
      }
      &.disabled {
        &:hover, &.hover {
          background-color: @color-bi-background-hover-disabled-slider-button-theme-dark;
        }
      }
  }
}