$press-upload-preview-border-radius: 2px !default;
$press-upload-preview-margin: 0 8px 8px 0 !default;
$press-upload-image-width: 80px !default;
$press-upload-image-height: $press-upload-image-width;
$press-upload-other-bgColor: rgb(242, 242, 242) !default;
$press-upload-other-flex: 1 !default;
$press-upload-text-font-size: 11px !default;
$press-upload-text-color: #909193 !default;
$press-upload-text-margin-top: 2px !default;
$press-upload-deletable-right: 0 !default;
$press-upload-deletable-top: 0 !default;
$press-upload-deletable-bgColor: rgb(55, 55, 55) !default;
$press-upload-deletable-height: 14px !default;
$press-upload-deletable-width: $press-upload-deletable-height;
$press-upload-deletable-boder-bottom-left-radius: 100px !default;
$press-upload-deletable-zIndex: 3 !default;
$press-upload-success-bottom: 0 !default;
$press-upload-success-right: 0 !default;
$press-upload-success-border-style: solid !default;
$press-upload-success-border-top-color: transparent !default;
$press-upload-success-border-left-color: transparent !default;
$press-upload-success-border-bottom-color: #5ac725 !default;
$press-upload-success-border-right-color: $press-upload-success-border-bottom-color;
$press-upload-success-border-width: 9px !default;
$press-upload-icon-top: 0px !default;
$press-upload-icon-right: 0px !default;
$press-upload-icon-h5-top: 1px !default;
$press-upload-icon-h5-right: 0 !default;
$press-upload-icon-width: 16px !default;
$press-upload-icon-height: $press-upload-icon-width;
$press-upload-success-icon-bottom: -10px !default;
$press-upload-success-icon-right: -10px !default;
$press-upload-status-right: 0 !default;
$press-upload-status-left: 0 !default;
$press-upload-status-bottom: 0 !default;
$press-upload-status-top: 0 !default;
$press-upload-status-bgColor: rgba(0, 0, 0, .5) !default;
$press-upload-status-icon-Zindex: 1 !default;
$press-upload-message-font-size: 12px !default;
$press-upload-message-color: #fff !default;
$press-upload-message-margin-top: 5px !default;
$press-upload-button-width: 80px !default;
$press-upload-button-height: $press-upload-button-width;
$press-upload-button-bgColor: rgb(244, 245, 247) !default;
$press-upload-button-border-radius: 2px !default;
$press-upload-botton-margin: 0 8px 8px 0 !default;
$press-upload-text-font-size: 11px !default;
$press-upload-text-color: #909193 !default;
$press-upload-text-margin-top: 2px !default;
$press-upload-hover-bgColor: rgb(230, 231, 233) !default;
$press-upload-disabled-opacity: .5 !default;

.press-upload {
  display: flex;
  flex-direction: column;
  flex: 1;

  &__wrap {
    display: flex;
    flex-wrap: wrap;
    flex: 1;

    &__preview {
      border-radius: $press-upload-preview-border-radius;
      margin: $press-upload-preview-margin;
      position: relative;
      overflow: hidden;
      display: flex;

      &__image {
        width: $press-upload-image-width;
        height: $press-upload-image-height;
      }

      &__other {
        width: $press-upload-image-width;
        height: $press-upload-image-height;
        background-color: $press-upload-other-bgColor;
        flex: $press-upload-other-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &__text {
          font-size: $press-upload-text-font-size;
          color: $press-upload-text-color;
          margin-top: $press-upload-text-margin-top;
        }
      }
    }
  }

  &__deletable {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    // top: $press-upload-deletable-top;
    // right: $press-upload-deletable-right;
    background-color: $press-upload-deletable-bgColor;
    // height: $press-upload-deletable-height;
    // width: $press-upload-deletable-width;
    display: flex;
    border-bottom-left-radius: $press-upload-deletable-boder-bottom-left-radius;
    align-items: center;
    justify-content: center;
    z-index: $press-upload-deletable-zIndex;

    ::v-deep .press-upload__deletable__icon,
    &__icon {
      position: absolute;
      transform: scale(.5);
      top: -2px;
      right: -2px;
      font-size: 16px;
      // top: $press-upload-icon-top;
      // right: $press-upload-icon-right;

      /* #ifdef H5 */
      // top: $press-upload-icon-h5-top;
      // right: $press-upload-icon-h5-right;

      /* #endif */
    }
  }

  &__success {
    position: absolute;
    bottom: $press-upload-success-bottom;
    right: $press-upload-success-right;
    display: flex;
    // 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物，不支持css绘制三角形
    // 所以在nvue下使用图片，非nvue下使用css实现

    /* #ifndef APP-NVUE */
    border-style: $press-upload-success-border-style;
    border-top-color: $press-upload-success-border-top-color;
    border-left-color: $press-upload-success-border-left-color;
    border-bottom-color: $press-upload-success-border-bottom-color;
    border-right-color: $press-upload-success-border-right-color;
    border-width: $press-upload-success-border-width;
    align-items: center;
    justify-content: center;

    /* #endif */

    &__icon {
      /* #ifndef APP-NVUE */
      position: absolute;
      transform: scale(.7);
      bottom: $press-upload-success-icon-bottom;
      right: $press-upload-success-icon-right;

      /* #endif */

      /* #ifdef APP-NVUE */
      width: $press-upload-icon-width;
      height: $press-upload-icon-height;

      /* #endif */
    }
  }

  &__status {
    position: absolute;
    top: $press-upload-status-top;
    bottom: $press-upload-status-bottom;
    left: $press-upload-status-left;
    right: $press-upload-status-right;
    background-color: $press-upload-status-bgColor;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &__icon {
      position: relative;
      z-index: $press-upload-status-icon-Zindex;
    }

    &__message {
      font-size: $press-upload-message-font-size;
      color: $press-upload-message-color;
      margin-top: $press-upload-message-margin-top;
    }
  }

  &__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: $press-upload-button-width;
    height: $press-upload-button-height;
    background-color: $press-upload-button-bgColor;
    border-radius: $press-upload-button-border-radius;
    margin: $press-upload-botton-margin;

    /* #ifndef APP-NVUE */
    box-sizing: border-box;

    /* #endif */

    &__text {
      font-size: $press-upload-text-font-size;
      color: $press-upload-text-color;
      margin-top: $press-upload-text-margin-top;
    }

    &--hover {
      background-color: $press-upload-hover-bgColor;
    }

    &--disabled {
      opacity: $press-upload-disabled-opacity;
    }
  }
}