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

$height: 40;
.track {
  position:           relative;
  height:             100%;

  &__track {
    position:         absolute;
    top:              50%;
    left:             0;

    width:            100%;
    height:           calc( $PX );

    background:       #FFF;
    box-shadow:       calc( $PX ) calc( $PX ) calc( $PX ) rgba(0,0,0,.5);

    &:after {
      content:        '';
      position:       absolute;
      left:           0;
      top:            calc( - $height/2 * $PX );
      width:          100%;
      height:         calc( $height * $PX );
      cursor:         pointer;
      /*background-color: yellow;*/
    }
  }

  &__track-progress {
    position:         absolute;
    left:             0;
    top:              50%;
    margin-top:       calc( -1 * $PX );
    height:           calc( 3*$PX );
    width:            0.0625em;
    /*background:       $c-orange;*/
    background:       $c-white;
    z-index:          1;
    transform-origin: left center;
    &:after {
      /*content:        '';*/
      position:       absolute;
      left:           0;
      top:            calc( - $height/2 * $PX );
      width:          100%;
      height:         calc( $height * $PX );
      cursor:         pointer;
      backface-visibility: hidden;
    }
  }

  &__ripple {
    position:         absolute;
    left:             0;
    top:              0;
    right:            0;
    bottom:           0;
    overflow:         hidden;
    /*background:       black;*/
    /*z-index:          1;*/
  }

  &.is-inversed {
    left:             auto;
    right:            0;
  }

  &.is-inversed &__track-progress {
    transform-origin: right center;
  }

  &.is-bound &__track-progress {
    background:       $c-orange;
  }

  &.is-y &__track {
    top:              0;
    left:             50%;

    height:           100%;
    width:            calc( $PX );

    /*box-shadow:       calc( $PX ) calc( $PX ) calc( $PX ) rgba(0,0,0,.5); */
  }


}