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

$size: 10;
.point {
  position:       absolute;
  width:          calc( $size * $PX );
  height:         calc( $size * $PX );
  margin-left:    calc( -$size/2 * $PX );
  margin-top:     calc( -$size/2 * $PX );
  cursor:         move;
  background:     $c-white;
  border-radius:  50%;
  z-index:        3;
  box-shadow:     calc(3*$PX) calc(3*$PX) 0 rgba(0,0,0,.5);
  /*border:         calc( 2*$PX ) solid $c-white;*/
  
  &__touch {
    position:     absolute;
    left:         50%;
    top:          50%;
    width:        calc( 2*$size*$PX );
    height:       calc( 2*$size*$PX );
    margin-left:  calc( -$size*$PX );
    margin-top:   calc( -$size*$PX );
  }

  [data-component="little-handle"] { display: none; }

  &:hover,
  &.is-selected {
    /*border-color: #8C6D8B;*/
    /*border-color: $c-orange;*/
    background: $c-orange;
  }

  &.is-selected {
    & [data-component="little-handle"] {
      display:    block;
    }
  }

  &.is-hide-handles {
    & [data-component="little-handle"] {
      display:    none;
    } 
  }
}