.nut-avatar-cropper {
  position: relative;
  display: flex;

  &-edit-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.3);
    z-index: 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; // 隐藏原生上传按钮
    cursor: pointer;
    z-index: 2;
  }

  &-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
    z-index: 1000;

    &-canvas,
    &-cut-canvas {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    &-cut-canvas {
      z-index: 0;
    }

    &-toolbar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 2;

      &.top {
        top: 0;
        bottom: inherit;
      }

      &-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 15px 15px;
      }

      &-item {
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;

        .nut-button {
          color: #fff;
        }
      }
    }

    &-highlight {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-color: transparent;

      .highlight {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: transparent;
        box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
      }
    }
  }

  &.round {
    .nut-avatar-cropper-edit-text {
      border-radius: 50%;
    }
  }
}

[dir='rtl'] .nut-avatar-cropper,
.nut-rtl .nut-avatar-cropper {
  &-edit-text {
    left: auto;
    right: 0;
  }

  &-input {
    left: auto;
    right: 0;
  }
  &-popup {
    left: auto;
    right: 0;

    &-canvas,
    &-cut-canvas {
      left: auto;
      right: 0;
    }

    &-toolbar {
      left: auto;
      right: 0;
    }

    &-highlight {
      left: auto;
      right: 0;
      .highlight {
        left: auto;
        right: 50%;
        transform: translate(50%, -50%);
      }
    }
  }
}