// 组件允许单个组件打包，因此默认引入公共基础样式 --

@import "../../base.less";

@import "./_var.less";
.horizontal-vertical-center-with-flex() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fill-with-position-absolute() {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.@{prefix}-upload {
  .@{prefix}-icon {
    font-size: @upload-icon-size;
    flex-shrink: 0;
  }

  .@{prefix}-icon-check-circle-filled {
    color: @upload-icon-check-circle-filled-color;
  }

  .@{prefix}-icon-error-circle-filled {
    color: @upload-icon-error-circle-filled-color;
  }

  .@{prefix}-icon-loading {
    color: @upload-icon-loading-color;
  }

  .@{prefix}-icon-add {
    color: @upload-icon-add-color;
  }
}

// 照片墙
.@{prefix}-upload {
  &__card {
    font-size: @upload-card-font-size;
    line-height: @upload-card-line-height;
    overflow: hidden;
    width: 100%;
    padding: @upload-card-padding;
    display: flex;
    flex-wrap: wrap;

    &-item {
      margin: @upload-card-item-margin;
      padding: @upload-card-item-padding;
      float: left;
      cursor: pointer;
      box-sizing: border-box;
      list-style: none;
      display: flex;

      &::after {
        content: "";
        display: block;
      }

      &.@{prefix}-is--error {

        & .@{prefix}-icon-warning_fill {
          color: @upload-card-item-error-icon-warning-color;
          margin-bottom: @upload-card-item-error-icon-warning-margin-bottom;
        }

        & .@{prefix}-upload__card-status {
          color: @upload-card-item-status-color;
        }
      }
    }

    & .@{prefix}-icon-loading {
      margin-bottom: @upload-card-icon-loading-margin-bottom;
    }

    &-content {
      position: relative;
      width: @upload-img-size;
      height: @upload-img-size;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      background-color: @upload-card-container-bg-color;
      border: @upload-card-contariner-border;
    }

    &-container {
      width: (@upload-img-size - 2);
      height: (@upload-img-size - 2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: @upload-card-container-bg-color;

      > .@{prefix}-icon,
      .@{prefix}-loading {
        font-size: @upload-icon-size-large;
        // margin-bottom: @upload-card-container-icon-add-margin-bottom;
      }

      > p {
        color: @text-color-placeholder;
      }
    }

    &-status-wrap {
      text-align: center;

      > svg {
        margin-bottom: @upload-card-status-wrap-svg-margin-bottom;
      }

      .@{prefix}-icon,
      .@{prefix}-loading {
        font-size: @upload-icon-size-middle;
      }
    }

    &-image {
      max-width: 100%;
      max-height: 100%;
    }

    &-status {
      color: @upload-card-status-color;
      font-size: @upload-card-status-font-size;
    }

    &-mask {
      background-color: @upload-card-mask-bg-color;
      color: @upload-card-mask-color;
      // transition: opacity .5s ease-in-out;
      // will-change: transform;
      // opacity: 0;
      .horizontal-vertical-center-with-flex();
      .fill-with-position-absolute();
    }

    &-delete-item {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      vertical-align: middle;
      z-index: 1;
      background-color: @upload-card-mask-bg-color;
      width: @font-size-l;
      height: @font-size-l;

      .close-icon {
        color: @bg-color-container;
        width: @font-size-l;
        height: @font-size-l;
      }
    }

    &-mask-item {
      > .@{prefix}-icon {
        cursor: pointer;
        font-size: @upload-icon-size;
      }
    }
  }
}