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

$handleHeight: 13;
.handle {
  width:          calc( $handleHeight * $PX );
  height:         calc( $handleHeight * $PX );

  cursor:         pointer;
  transform:      translateX(0);
  backface-visibility: hidden;

  &__inner,
  &__shadow {
    position:       absolute;
    left:           0;
    top:            0;
    z-index:        1;

    width:          100%;
    height:         100%;
    border-radius:  50%;
    cursor:         pointer;
    /*transform:      translateZ(0);*/
    /*backface-visibility: hidden;*/
  }

  &__inner {
    background:     #FFF;
  }

  &__shadow {
    box-shadow:     calc( $PX ) calc( $PX ) calc( 2*$PX ) black;
    opacity:        .35;
    z-index:        0;
  }

  &:hover &__inner,
  &:hover &__shadow {
    transform:      scale(1.1);
  }

  &:active &__inner {
    transform:      scale(1.2);
    /*box-shadow:     calc( $PX ) calc( $PX ) calc( 1*$PX ) rgba(0,0,0,.35);*/
  }
  &:active &__shadow {
    opacity:        .85;
    transform:      scale(1);
  }

  $width:  9;
  $height: 20;
  &.is-bound {
    width:          calc( $width * $PX );
    height:         calc( $height * $PX );
    margin-left:    calc( - $width * $PX );
    margin-top:     calc( - $height/2 * $PX );
  }
  &.is-bound &__inner {
    background:     $c-orange;
    $lineHeight: 40;
    &:after {
      content:      '';
      position:     absolute;
      right:        0;
      top:          50%;
      margin-top:   calc( - $lineHeight/2 * $PX );
      width:        calc( $PX );
      height:       calc( $lineHeight * $PX );
      background:   $c-orange;
    }
  }
  &.is-bound &__inner,
  &.is-bound &__shadow {
    border-top-left-radius:      $BRADIUS;
    border-bottom-left-radius:   $BRADIUS;
    border-top-right-radius:     0;
    border-bottom-right-radius:  0;
  }

  &.is-inversed {
    margin-left:    0;
  }
  &.is-inversed &__shadow {
    box-shadow:     calc( - $PX ) calc( $PX ) calc( 2*$PX ) black;
  }
  &.is-inversed &__inner {
    border-top-left-radius:      0;
    border-bottom-left-radius:   0;
    border-top-right-radius:     $BRADIUS;
    border-bottom-right-radius:  $BRADIUS;
    &:after {
      right:        auto;
      left:         0;
    }
  }
}