@import '../../style/index.less';
@prefixCls: eh-image-upload;

.@{prefixCls} {
  &-list {
    padding: 0;

    .@{prefixCls}-flex {
      text-align: left;
      overflow: hidden;
      display: flex;
      align-items: center;
      margin: 0 -4 * @hd 8 * @hd;

      &:last-child {
        margin-bottom: 0;
      }

      &-item {
        position: relative;
        margin: 0 4 * @hd;
        box-sizing: border-box;
        flex: 1;

        &:after {
          display: block;
          content: ' ';
          padding-bottom: 100%;
        }
      }
    }

    .@{prefixCls}-item {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 100%;

      &-img {
        height: 100%;
        width: 100%;
        border-radius: 2 * @hd;
        object-fit: cover;
        object-position: 50% 50%;
      }

      img {
        width: 100%;
      }
    }

    .@{prefixCls}-upload-btn {
      box-sizing: border-box;
      border-radius: 2 * @hd;
      background-color: #fff;

      &-active {
        background-color: #ddd;
      }

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

    .@{prefixCls}-add-icon {
      font-size: 82 * @hd;
      color: #ddd;
    }
  }
}
