@import "./var.less";
.ix-slider{
  position: relative;
  vertical-align: middle;
  .ix-slider_bg{
    width: 100%;
    height: 6px;
    margin: 16px 0;
    background: #e4e7ed;
    border-radius: 3px;
    cursor: pointer;
  }
  .ix-slider_bar{
    position: absolute;
    top: 0;
    background: @theme;
    border-radius: 3px;
    height: 6px;
    width: 0;
    pointer-events: none;
  }
  .ix-slider_bar_button{
    border-radius: 100%;
    width: 16px;
    height: 16px;
    border: 2px solid #5aa4ae;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: -10px;
    margin-top: -10px;
    &:hover, &.moveing{
      transform-origin: 10px 10px;
      transform: scale(1.1);
    }
  }
  .ix-slider_points{
    position: absolute;
    top: 0;
    pointer-events: none;
    .ix-slider_points_item{
      position: absolute;
      >i{
        display: block;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 3px;
      }
      >a{
        margin-top: 7px;
        display: block;
        pointer-events: auto;
      }
    }
  }
  &.is-vertical{
    .ix-slider_bg{
      width: 6px;
      height: 100%;
    }
    .ix-slider_bar{
      width: 6px;
      top: auto;
    }
    .ix-slider_bar_button{
      top: auto;
      left: 3px;
      margin-top: 0;
      margin-bottom: -10px;
    }
  }
}