.#{$image-picker-prefix-cls} {
  display: flex;
  margin-left: -$image-picker-item-padding-x;

  &__item {
    position: relative;
    flex-basis: 25%;
    padding-left: $image-picker-item-padding-x;
    border-radius: $border-radius;

    // 让高度等于宽度
    &::after {
      display: block;
      padding-bottom: 100%;
      content: "";
    }
  }

  &__remove {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: $image-picker-remove-size;
    height: $image-picker-remove-size;
    font-size: $image-picker-remove-icon-font-size;
    line-height: $image-picker-remove-size;
    color: $white;
    text-align: center;
    background-color: $brand-danger;
    border-radius: 50%;
    transform: translate(30%,-30%);
    @extend %aid-icon;

    &::before {
      content: "\F884";
    }
  }

  &__content {
    position: absolute;

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

  &__upload-btn {
    position: absolute;
    width: calc(100% - #{$image-picker-item-padding-x});
    height: 100%;
    overflow: hidden;
    font-size: $image-picker-upload-btn-font-size;
    color: $gray-11;
    background-color: $gray-4;
    @extend %aid-icon;

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      content: "\F666";
      transform: translate(-50%,-50%);
    }

    input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
    }
  }
}