@import "../core/variables.less";

.cropper-image-modal {
  .container {
    width: 300px;
    overflow: hidden;
    .img-placeholder {
      width: 300px;
      height: 300px;
      border: 1px solid @xm-color-border;
      margin-bottom: 10px;
    }
    .img-source {
      max-width: 100%;
    }
  }

  .preview-wrap {
    text-align: center;

    .preview {
      margin: 10px auto 5px;
      overflow: hidden;

      img {
        width: 100%;
        display: inline-block;
      }

      &.preview-1 {
        width: 90px !important;
        height: 90px !important;
        border-radius: 50px;
      }

      &.preview-2 {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50px;
      }

      &.preview-3 {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50px;
      }
    }
  }
  &.new-cropper-address-modal {
    .preview-wrap {
      .preview {
        &.preview-1,&.preview-2, &.preview-3 {
          border-radius: 0 !important;
        }
      }
    }
  }
}
