.upload-image_custom {
  position: relative;
  display: inline-block;

  input {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
  }
}

.image-crop-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999;

  .crop-button-container {
    height: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 .3rem;
    background-color: rgba(0, 0, 0, 0.5);

    a {
      color: #FFF;
      padding: .3rem;
      line-height: .4rem;
    }
  }

  .image-crop-area {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 1rem;

    .upload-image__cropper {
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      direction: ltr;
      touch-action: none;
      text-align: left;

      &-box,
      &-box-canvas,
      &-drag-box,
      &-crop-box,
      &-face {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        user-select: none;
      }

      &-box-canvas {
        transition: opacity 0.5s;

        &.canvas-loading {
          opacity: 0;
        }
      }

      &-box-canvas img {
        position: relative;
        text-align: left;
        user-select: none;
        transform: none;
        max-width: none;
        max-height: none;
      }

      &-move {
        cursor: move;
      }

      &-crop {
        cursor: crosshair;
      }

      &-modal {
        background: rgba(0, 0, 0, 0.5);
      }

      &-view-box {
        display: block;
        overflow: hidden;
        width: 100%;
        height: 100%;
        border: 1px solid #32AAFF;
        user-select: none;
      }

      &-view-box img {
        user-select: none;
        text-align: left;
        max-width: none;
        max-height: none;
      }

      &-face {
        top: 0;
        left: 0;
        background-color: #fff;
        opacity: 0.1;
      }

      &-line {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #32AAFF;
      }

      .line-w {
        top: 0px;
        left: 0;
        height: .01rem;
        cursor: n-resize;
      }

      .line-a {
        top: 0;
        left: 0px;
        width: .01rem;
        cursor: w-resize;
      }

      .line-s {
        bottom: 0px;
        left: 0;
        height: .01rem;
        cursor: s-resize;
      }

      .line-d {
        top: 0;
        right: 0px;
        width: .01rem;
        cursor: e-resize;
      }

      &-point {
        position: absolute;
        width: .16rem;
        height: .16rem;
        background-color: #32AAFF;
      }

      .point1 {
        top: -0.06rem;
        left: -0.06rem;
        cursor: nw-resize;
      }

      .point2 {
        top: -0.06rem;
        left: 50%;
        margin-left: -0.06rem;
        cursor: n-resize;
      }

      .point3 {
        top: -0.06rem;
        right: -0.06rem;
        cursor: ne-resize;
      }

      .point4 {
        top: 50%;
        left: -0.06rem;
        margin-top: -0.06rem;
        cursor: w-resize;
      }

      .point5 {
        top: 50%;
        right: -0.06rem;
        margin-top: -0.06rem;
        cursor: e-resize;
      }

      .point6 {
        bottom: -0.06rem;
        left: -0.06rem;
        cursor: sw-resize;
      }

      .point7 {
        bottom: -0.06rem;
        left: 50%;
        margin-left: -0.06rem;
        cursor: s-resize;
      }

      .point8 {
        bottom: -0.06rem;
        right: -0.06rem;
        cursor: se-resize;
      }
    }
  }
}