$prefix: zhst;

:global {
  // .zhst-cropper-container {
  //     width: 100px;
  // }
  .zhst-cropper {
    &-container {
      position: relative;
      direction: ltr;
      font-size: 0;
      line-height: 0;
      touch-action: none;
      user-select: none;
    }

    &-container,
    &-wrap-box,
    &-canvas,
    &-drag-box,
    &-crop-box,
    &-face,
    &-modal {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    &-drag-box {
      cursor: crosshair;
    }

    &-view-box {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 100%;
      outline: 1px solid #39f;
      outline-color: rgb(51 153 255 / 75%);
    }

    //mask
    &-mask {
      background-color: rgb(0 0 0 / 50%);
    }

    //拖拽
    &-face {
      background-color: #fff;
      cursor: move;
      opacity: 0;
    }

    //点
    &-point {
      position: absolute;
      width: 6px;
      height: 6px;

      // background: #fff;
      background-color: #39f;
      border-radius: 50%;

      // border: 0.2px solid #000;

      //     北n
      //  东w    西e
      //     南s

      &.point-nw {
        top: -3px;
        left: -3px;
        cursor: nwse-resize;
      }

      &.point-n {
        top: -3px;
        left: 50%;
        cursor: ns-resize;
        transform: translateX(-50%);
      }

      &.point-ne {
        top: -3px;
        right: -3px;
        cursor: nesw-resize;
      }

      &.point-w {
        top: 50%;
        left: -3px;
        cursor: ew-resize;
        transform: translateY(-50%);
      }

      &.point-e {
        top: 50%;
        right: -3px;
        cursor: ew-resize;
        transform: translateY(-50%);
      }

      &.point-sw {
        bottom: -3px;
        left: -3px;
        cursor: nesw-resize;
      }

      &.point-s {
        bottom: -3px;
        left: 50%;
        cursor: ns-resize;
        transform: translateX(-50%);
      }

      &.point-se {
        right: -3px;
        bottom: -3px;
        cursor: nwse-resize;
      }
    }

    //线
    &-line {
      // opacity: 0.1;
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #39f;

      &.line-e {
        top: 0;
        right: -1px;
        width: 2px;
        cursor: ew-resize;
      }

      &.line-n {
        top: -1px;
        left: 0;
        height: 2px;
        cursor: ns-resize;
      }

      &.line-w {
        top: 0;
        left: -1px;
        width: 2px;
        cursor: ew-resize;
      }

      &.line-s {
        bottom: -1px;
        left: 0;
        height: 2px;
        cursor: ns-resize;
      }
    }

    //辅助class
    &-invisible {
      opacity: 0;
    }

    &-hide {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
    }

    &-hidden {
      display: none !important;
    }

    &-move {
      cursor: move;
    }

    &-crop {
      cursor: crosshair;
    }

    &-disabled &-drag-box,
    &-disabled &-face,
    &-disabled &-line,
    &-disabled &-point {
      cursor: not-allowed;
    }
  }
}