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

.little-handle {
  position: absolute;
  left:     50%;
  top:      50%;
  width:    0;
  height:   0;
  
  $size: 6;  
  &__point {
    position:     absolute;
    z-index:      1;
    width:        calc( $size*$PX );
    height:       calc( $size*$PX );
    left:         50%;
    top:          50%;
    margin-left:  calc( -$size/2 * $PX);
    margin-top:   calc( -$size/2 * $PX);
    background:   $c-orange;
    box-shadow:   calc( 1*$PX ) calc( 1*$PX ) 0 rgba(0,0,0,.5);
  }

  &__easy-touch {
    position:     absolute;
    z-index:      1;
    width:        200%;
    height:       200%;
    left:         50%;
    top:          50%;
    margin-left:  -100%;
    margin-top:   -100%;
  }

  &__line {
    position:     absolute;
    width:        calc( 1*$PX );
    height:       calc( 1*$PX );
    margin-left:  calc( -1*$PX );
    margin-top:   calc( -1*$PX );
    left:         50%;
    top:          50%;
    background:   $c-orange;
    transform-origin: 50% 100%;
    /*box-shadow:   calc( 1*$PX ) 0 0 rgba(0,0,0,.5);*/
  }

}