@import 'global';

$POINT_SIZE: 8px;

.brainhub-crop-tool,
.brainhub-image-rotator {
  position: relative;
  overflow: hidden;
}

.brainhub-crop-tool {
  cursor: crosshair;
}

.brainhub-crop-tool__controls,
.brainhub-image-rotator__controls {
  text-align: center;
}

.brainhub-crop-tool__image,
.brainhub-image-rotator__image {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.brainhub-crop-tool__button,
.brainhub-image-rotator__button {
  border: none;
  outline: none;
  font-size: 14px;
  color: white;
  border-radius: 5px;
  padding: 4px 16px;
  margin: 4px;
}

.brainhub-crop-tool__button--cancel,
.brainhub-image-rotator__button--arrow {
  background-color: $LIGTH_GRAY;
}

.brainhub-crop-tool__button--save,
.brainhub-image-rotator__button--save {
  background-color: $LIGHT_GREEN;
}

.brainhub-selected-area {
  position: absolute;
  border: 1px dashed white;
  cursor: move;
  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
}

.brainhub-selected-area__resize-point {
  width:8px;
  height: 8px;
  position: absolute;
  background-color: white;
  border: 1px solid;
}

.brainhub-selected-area__resize-point--t,
.brainhub-selected-area__resize-point--b {
  left: calc(50% - 6px); // border + point_size/2
}

.brainhub-selected-area__resize-point--r,
.brainhub-selected-area__resize-point--l {
  top: calc(50% - 6px); // border + point_size/2
}

.brainhub-selected-area__resize-point--tl,
.brainhub-selected-area__resize-point--t,
.brainhub-selected-area__resize-point--tr {
  top: calc(0px - 6px); // border + point_size/2
}
.brainhub-selected-area__resize-point--tr,
.brainhub-selected-area__resize-point--r,
.brainhub-selected-area__resize-point--br {
  right: calc(0px - 6px); // border + point_size/2
}
.brainhub-selected-area__resize-point--bl,
.brainhub-selected-area__resize-point--b,
.brainhub-selected-area__resize-point--br {
  bottom: calc(0px - 6px); // border + point_size/2
}
.brainhub-selected-area__resize-point--tl,
.brainhub-selected-area__resize-point--l,
.brainhub-selected-area__resize-point--bl {
  left: calc(0px - 6px); // border + point_size/2
}

.brainhub-selected-area__resize-point--t,
.brainhub-selected-area__resize-point--b {
  cursor: ns-resize;
}
.brainhub-selected-area__resize-point--tr,
.brainhub-selected-area__resize-point--bl {
  cursor: nesw-resize;
}
.brainhub-selected-area__resize-point--l,
.brainhub-selected-area__resize-point--r {
  cursor: ew-resize;
}
.brainhub-selected-area__resize-point--tl,
.brainhub-selected-area__resize-point--br {
  cursor: nwse-resize;
}

.brainhub-canvas-printer {
  display: none;
}
