.toolbar {
  padding: 3px;
}

.toolbar #toolbar-select {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0,0,0,.3);
  background-color: gray;
}

.ctrl.selector {
  position: absolute;
  pointer-events: none;
  transition: width .3s, height .3s, top .3s, left .3s;
  background-color: transparent;
  z-index: 1000;
}

.ctrl.selector .wrapper {
  position: relative;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.ctrl.selector .wrapper .ctrlPoint {
  position: absolute;
  border: 1px solid #FFF;
  width: 8px;
  height: 8px;
  background-color: #006;
  opacity: 0.3;
  transition: opacity .5s;
}

.ctrl.selector .wrapper .ctrlPoint:hover{
  opacity: 1;
}

.ctrl.selector .wrapper .ctrlPoint.lt{
  top:0;
  left:0;
  cursor: nw-resize;
}

.ctrl.selector .wrapper .ctrlPoint.ct{
  top:0;
  left: calc(50% - 4px);
  cursor: n-resize;
}

.ctrl.selector .wrapper .ctrlPoint.rt{
  top:0;
  right:0;
  cursor: ne-resize;
}

.ctrl.selector .wrapper .ctrlPoint.lm{
  top:calc(50% - 4px);
  left:0;
  cursor: w-resize;
}

.ctrl.selector .wrapper .ctrlPoint.cm{
  top:calc(50% - 4px);
  left:calc(50% - 4px);
  cursor: all-scroll;
  display: none;
}

.ctrl.selector .wrapper .ctrlPoint.rm{
  top:calc(50% - 4px);
  right:0;
  cursor: e-resize;
}

.ctrl.selector .wrapper .ctrlPoint.lb{
  bottom:0;
  left:0;
  cursor: sw-resize;
}

.ctrl.selector .wrapper .ctrlPoint.cb{
  bottom:0;
  left: calc(50% - 4px);
  cursor: s-resize;
}

.ctrl.selector .wrapper .ctrlPoint.rb{
  bottom:0;
  right:0;
  cursor: se-resize;
}
