import { blue as p } from "../../../../@ant-design/colors/es/index.mjs";
import { textEllipsis as s, clearFix as $ } from "../../style/index.mjs";
import "../../../../@ant-design/cssinjs/es/extractStyle.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCacheToken.mjs";
import "react";
import "../../../../@ant-design/cssinjs/es/StyleContext.mjs";
import { unit as t } from "../../../../@ant-design/cssinjs/es/util/index.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCompatibleInsertionEffect.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useEffectCleanupRegister.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useHMR.mjs";
import "../../../../rc-util/es/warning.mjs";
import "../../../../@ant-design/cssinjs/es/theme/createTheme.mjs";
import "../../../../@ant-design/cssinjs/es/theme/ThemeCache.mjs";
import "../../../../@ant-design/cssinjs/es/transformers/legacyLogicalProperties.mjs";
const A = (i) => {
  const {
    componentCls: l,
    iconCls: a,
    uploadThumbnailSize: n,
    uploadProgressOffset: d,
    calc: e
  } = i, o = `${l}-list`, r = `${o}-item`;
  return {
    [`${l}-wrapper`]: {
      // ${listCls} 增加优先级
      [`
        ${o}${o}-picture,
        ${o}${o}-picture-card,
        ${o}${o}-picture-circle
      `]: {
        [r]: {
          position: "relative",
          height: e(n).add(e(i.lineWidth).mul(2)).add(e(i.paddingXS).mul(2)).equal(),
          padding: i.paddingXS,
          border: `${t(i.lineWidth)} ${i.lineType} ${i.colorBorder}`,
          borderRadius: i.borderRadiusLG,
          "&:hover": {
            background: "transparent"
          },
          [`${r}-thumbnail`]: Object.assign(Object.assign({}, s), {
            width: n,
            height: n,
            lineHeight: t(e(n).add(i.paddingSM).equal()),
            textAlign: "center",
            flex: "none",
            [a]: {
              fontSize: i.fontSizeHeading2,
              color: i.colorPrimary
            },
            img: {
              display: "block",
              width: "100%",
              height: "100%",
              overflow: "hidden"
            }
          }),
          [`${r}-progress`]: {
            bottom: d,
            width: `calc(100% - ${t(e(i.paddingSM).mul(2).equal())})`,
            marginTop: 0,
            paddingInlineStart: e(n).add(i.paddingXS).equal()
          }
        },
        [`${r}-error`]: {
          borderColor: i.colorError,
          // Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
          [`${r}-thumbnail ${a}`]: {
            [`svg path[fill='${p[0]}']`]: {
              fill: i.colorErrorBg
            },
            [`svg path[fill='${p.primary}']`]: {
              fill: i.colorError
            }
          }
        },
        [`${r}-uploading`]: {
          borderStyle: "dashed",
          [`${r}-name`]: {
            marginBottom: d
          }
        }
      },
      [`${o}${o}-picture-circle ${r}`]: {
        [`&, &::before, ${r}-thumbnail`]: {
          borderRadius: "50%"
        }
      }
    }
  };
}, I = (i) => {
  const {
    componentCls: l,
    iconCls: a,
    fontSizeLG: n,
    colorTextLightSolid: d,
    calc: e
  } = i, o = `${l}-list`, r = `${o}-item`, c = i.uploadPicCardSize;
  return {
    [`
      ${l}-wrapper${l}-picture-card-wrapper,
      ${l}-wrapper${l}-picture-circle-wrapper
    `]: Object.assign(Object.assign({}, $()), {
      display: "inline-block",
      width: "100%",
      [`${l}${l}-select`]: {
        width: c,
        height: c,
        marginInlineEnd: i.marginXS,
        marginBottom: i.marginXS,
        textAlign: "center",
        verticalAlign: "top",
        backgroundColor: i.colorFillAlter,
        border: `${t(i.lineWidth)} dashed ${i.colorBorder}`,
        borderRadius: i.borderRadiusLG,
        cursor: "pointer",
        transition: `border-color ${i.motionDurationSlow}`,
        [`> ${l}`]: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "100%",
          textAlign: "center"
        },
        [`&:not(${l}-disabled):hover`]: {
          borderColor: i.colorPrimary
        }
      },
      // list
      [`${o}${o}-picture-card, ${o}${o}-picture-circle`]: {
        [`${o}-item-container`]: {
          display: "inline-block",
          width: c,
          height: c,
          marginBlock: `0 ${t(i.marginXS)}`,
          marginInline: `0 ${t(i.marginXS)}`,
          verticalAlign: "top"
        },
        "&::after": {
          display: "none"
        },
        [r]: {
          height: "100%",
          margin: 0,
          "&::before": {
            position: "absolute",
            zIndex: 1,
            width: `calc(100% - ${t(e(i.paddingXS).mul(2).equal())})`,
            height: `calc(100% - ${t(e(i.paddingXS).mul(2).equal())})`,
            backgroundColor: i.colorBgMask,
            opacity: 0,
            transition: `all ${i.motionDurationSlow}`,
            content: '" "'
          }
        },
        [`${r}:hover`]: {
          [`&::before, ${r}-actions`]: {
            opacity: 1
          }
        },
        [`${r}-actions`]: {
          position: "absolute",
          insetInlineStart: 0,
          zIndex: 10,
          width: "100%",
          whiteSpace: "nowrap",
          textAlign: "center",
          opacity: 0,
          transition: `all ${i.motionDurationSlow}`,
          [`
            ${a}-eye,
            ${a}-download,
            ${a}-delete
          `]: {
            zIndex: 10,
            width: n,
            margin: `0 ${t(i.marginXXS)}`,
            fontSize: n,
            cursor: "pointer",
            transition: `all ${i.motionDurationSlow}`,
            color: d,
            "&:hover": {
              color: d
            },
            svg: {
              verticalAlign: "baseline"
            }
          }
        },
        [`${r}-thumbnail, ${r}-thumbnail img`]: {
          position: "static",
          display: "block",
          width: "100%",
          height: "100%",
          objectFit: "contain"
        },
        [`${r}-name`]: {
          display: "none",
          textAlign: "center"
        },
        [`${r}-file + ${r}-name`]: {
          position: "absolute",
          bottom: i.margin,
          display: "block",
          width: `calc(100% - ${t(e(i.paddingXS).mul(2).equal())})`
        },
        [`${r}-uploading`]: {
          [`&${r}`]: {
            backgroundColor: i.colorFillAlter
          },
          [`&::before, ${a}-eye, ${a}-download, ${a}-delete`]: {
            display: "none"
          }
        },
        [`${r}-progress`]: {
          bottom: i.marginXL,
          width: `calc(100% - ${t(e(i.paddingXS).mul(2).equal())})`,
          paddingInlineStart: 0
        }
      }
    }),
    [`${l}-wrapper${l}-picture-circle-wrapper`]: {
      [`${l}${l}-select`]: {
        borderRadius: "50%"
      }
    }
  };
};
export {
  I as genPictureCardStyle,
  A as genPictureStyle
};
