.tpl-block-range-slider
  margin: 20px 0
  height: 2px
  theme(background 'base')
  &-target,
  &-target *
    touch-callout: none
    user-select: none
    touch-action: none
    box-sizing: border-box


  &-base
    width: 100%
    height: 100%
    position: relative


  &-origin
    position: absolute
    right: 0
    top: 0
    left: 0
    bottom: 0


  &-handle
    position: relative
    z-index: 1
    theme(background 'white')
    border: 3px solid //colorBlue
    theme(border-color 'accent-1')
    border-width: 3px 4px
    cursor: default
    width: 10px
    height: 15px
    top: -7px
    left: -5px
    transition: border-color 0.2s
    @media min
      border-width: 10px
      height: 40px
      width: 25px
      left: -12px
      top: -17px
      &:active
        theme(border-color 'accent-2')

  &-horizontal
    height: 2px
    @media min
      height: 5px
  &-background // После правого ползунка
    theme(background 'base')


  &-stacking &-handle
    z-index: 10
  &-stacking + &-origin
    *z-index: -1
  &-state-tap &-origin
    transition: left 0.3s, top 0.3s
  &-state-drag *
    cursor: inherit !important
  &-dragable
    cursor: n-resize
  &-connect // Между ползунками
    transition: background 450ms
    theme(background 'base')
  &-target // Перед левым ползунком
    theme(background 'base')
  &-dragable
    cursor: w-resize
  [disabled]&-connect,
  [disabled] &-connect
    background: red
  [disabled] &-handle
    cursor: not-allowed
  &-state-blocked &-connect,
  &-state-blocked &-connect
    background: red


