$frameAnimation: 0.35s ease;
$canvasTop: 40px;

.#{$cv-prefix}canvas {
  background-color: rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  width: (100% - $leftWidth);
  height: calc(100% - $canvasTop);
  bottom: 0;
  overflow: hidden;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 40px;

  .#{$app-prefix}ghost {
    display: none;
    pointer-events: none;
    background-color: #5b5b5b;
    border: 2px dashed #ccc;
    position: absolute;
    z-index: 10;

    @include opacity(0.55);
  }

  .#{$app-prefix}highlighter,
  .#{$app-prefix}highlighter-sel {
    position: absolute;
    outline: 1px solid $colorBlue;
    outline-offset: -1px;
    pointer-events: none;
  }

  .#{$app-prefix}highlighter-warning {
    outline: 3px solid $colorYell;
  }

  .#{$app-prefix}highlighter-sel {
    outline: 3px solid $colorBlue;
  }

  ##{$app-prefix}tools {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    outline: none;
  }

  /* This simulate body behaviour */
  > div:first-child {
    background-color: #fff;
    position: relative;
    height: 100%;
    overflow: auto;
    width: 100%;
  }
}

.#{$cv-prefix}canvas * {
  box-sizing: border-box;
}

.#{$app-prefix}frame {
  outline: medium none;
  height: 100%;
  width: 100%;
  border: none;
  margin: auto;
  display: block;
  transition: width $frameAnimation, height $frameAnimation;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.#{$app-prefix}toolbar {
  position: absolute;
  background-color: $colorBlue;
  color: white;
  z-index: 10;
}

.#{$app-prefix}toolbar-item {
  padding: 5px 7px;
  font-size: 0.8rem;
  cursor: pointer;
}

.#{$app-prefix}resizer-c {
  @extend .#{$app-prefix}no-pointer-events;

  position: absolute;
  z-index: 9;
}

.#{$app-prefix}margin-v {

}

.#{$app-prefix}margin-v-el,
.#{$app-prefix}padding-v-el,
.#{$app-prefix}fixedmargin-v-el,
.#{$app-prefix}fixedpadding-v-el {
  @extend .#{$app-prefix}no-pointer-events;

  @include opacity(0.1);

  position: absolute;
  background-color: yellow;
}

.#{$app-prefix}fixedmargin-v-el,
.#{$app-prefix}fixedpadding-v-el {
  @include opacity(0.2);
}

.#{$app-prefix}padding-v-el,
.#{$app-prefix}fixedpadding-v-el {
  background-color: navy;
}

.#{$app-prefix}resizer-h {
  pointer-events: all;
  position: absolute;
  border: 3px solid $colorBlue;
  width: 10px;
  height: 10px;
  background-color: #fff;
  margin: $hndlMargin;
}

.#{$app-prefix}resizer-h-tl {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.#{$app-prefix}resizer-h-tr {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.#{$app-prefix}resizer-h-tc {
  top: 0;
  margin: $hndlMargin auto;
  left: 0;
  right: 0;
  cursor: ns-resize;
}

.#{$app-prefix}resizer-h-cl {
  left: 0;
  margin: auto $hndlMargin;
  top: 0;
  bottom: 0;
  cursor: ew-resize;
}

.#{$app-prefix}resizer-h-cr {
  margin: auto $hndlMargin;
  top: 0;
  bottom: 0;
  right: 0;
  cursor: ew-resize;
}

.#{$app-prefix}resizer-h-bl {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.#{$app-prefix}resizer-h-bc {
  bottom: 0;
  margin: $hndlMargin auto;
  left: 0;
  right: 0;
  cursor: ns-resize;
}

.#{$app-prefix}resizer-h-br {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

.#{$pn-prefix}panel {
  .#{$app-prefix}resizer-h {
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    opacity: 0;
    transition: opacity 0.25s;

    &:hover {
      opacity: 1;
    }
  }

  .#{$app-prefix}resizer-h-tc,
  .#{$app-prefix}resizer-h-bc {
    margin: 0 auto;
    width: 100%;
  }

  .#{$app-prefix}resizer-h-cr,
  .#{$app-prefix}resizer-h-cl {
    margin: auto 0;
    height: 100%;
  }
}

.#{$app-prefix}resizing .#{$app-prefix}highlighter,
.#{$app-prefix}resizing .#{$app-prefix}badge {
  display: none !important;
}

.#{$app-prefix}resizing-tl * {
  cursor: nwse-resize !important;
}

.#{$app-prefix}resizing-tr * {
  cursor: nesw-resize !important;
}

.#{$app-prefix}resizing-tc * {
  cursor: ns-resize !important;
}

.#{$app-prefix}resizing-cl * {
  cursor: ew-resize !important;
}

.#{$app-prefix}resizing-cr * {
  cursor: ew-resize !important;
}

.#{$app-prefix}resizing-bl * {
  cursor: nesw-resize !important;
}

.#{$app-prefix}resizing-bc * {
  cursor: ns-resize !important;
}

.#{$app-prefix}resizing-br * {
  cursor: nwse-resize !important;
}

.btn-cl {
  @include opacity(0.3);

  font-size: 25px;
  cursor: pointer;

  &:hover {
    @include opacity(0.7);
  }
}