@import 'Styles/colors.scss';
@import 'Styles/fonts.scss';
@import 'Styles/helpers.scss';

.cutout {
  /deep/ .cropper-container {
   @extend .default-cropper;

   .cropper-dashed {
     border: solid $black;

     &.dashed-h {
       border-width: 1px 0;
       display: block;
     }

     &.dashed-v {
       border-width: 0 1px;
       display: block;
     }
   }

   .cropper-modal {
     opacity: 0.54;
   }

   .cropper-line {
     background-color: transparent;
   }

   .cropper-view-box {
     outline: 1px solid $black;
     outline-color: $black;
   }

   .cropper-crop-box {
     background-color: $white;
   }

   .cropper-center {
     display: none;
   }
 }
}

.detail-preview {
  /deep/ .cropper-container {
    @extend .default-cropper;

    &:hover {
      &::after {
        @extend .cropper-tooltip;

        background-color: black;
        border-radius: 2px;
        content: 'Draw New Zoom Safe Area';
        display: block;
        left: 50%;
        opacity: 1;
        padding: 5px 8px;
        position: absolute;
        text-align: center;
        top: 20px;
        transform: translateX(-50%);
      }
    }

    .cropper-dashed {
      border: none;
    }

    .cropper-view-box {
      outline: 1px dashed $black;
      box-shadow: 0 0 0 1px $white, inset 0 0 0 1px $white;
    }

    .cropper-face,
    .cropper-line,
    .cropper-modal {
      background-color: transparent;
    }

    .cropper-modal {
      opacity: 1;
    }

    .cropper-center {
      opacity: 1;

      &::before,
      &::after {
        background-color: white;
      }

      &::after {
        height: 15px;
        left: 0;
        top: -6px;
        width: 3px;
      }

      &::before {
        height: 3px;
        left: -6px;
        top: 0;
        width: 15px;
      }
    }
  }
}

.master-crop {
  /deep/ .cropper-container {
    @extend .default-cropper;

    .cropper-modal {
      background-color: $white;
      opacity: 0.8;
    }

    .cropper-line {
      background-color: transparent;
    }

    .cropper-view-box {
      outline: 1px solid $black;
      outline-color: $black;
    }

    .cropper-center {
      display: none;
    }
  }
}