@import '../assets/globals.postcss.css';
/*@import './handle.postcss.css';*/

$height: 30;
.slider {
  position:           relative;
  width:              100%;
  height:             calc( $height * $PX );
  
  &__inner {
    width:            100%;
    height:           100%;
    position:         relative;
  }
  
  & .handle,
  & .progress-handle {
    z-index:          3;
    position:         absolute;
    top:              50%;
  }
  $handleHeight: 13;
  & .progress-handle {
    left:             0;
    margin-left:      calc( - $handleHeight/2 * $PX );
    margin-top:       calc( - $handleHeight/2 * $PX );
  }

  & .track {
    z-index:        2;
  }

  &.is-y {
    width:          calc( $height * $PX );
    height:         100%;
    
    .handle {
      left:           50%;
      top:            auto;
      bottom:         0;
      margin-top:     0;
      margin-bottom:  calc( -$handleHeight/2 * $PX );
    }
  }
}