'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

require('../../../theme/index.cjs');
var index = require('../../../theme/style/index.cjs');
var genComponentStyleHook = require('../../../theme/token/util/genComponentStyleHook.cjs');
var statistic = require('../../../theme/token/util/statistic.cjs');

const genBaseStyle = (token) => {
  const {
    antCls,
    componentCls,
    iconCls,
    avatarBg,
    avatarColor,
    containerSize,
    containerSizeLG,
    containerSizeSM,
    textFontSize,
    textFontSizeLG,
    textFontSizeSM,
    borderRadius,
    borderRadiusLG,
    borderRadiusSM,
    lineWidth,
    lineType
  } = token;
  const avatarSizeStyle = (size, fontSize, radius) => ({
    width: size,
    height: size,
    lineHeight: `${size - lineWidth * 2}px`,
    borderRadius: "50%",
    [`&${componentCls}-square`]: {
      borderRadius: radius
    },
    [`${componentCls}-string`]: {
      position: "absolute",
      left: {
        _skip_check_: true,
        value: "50%"
      },
      transformOrigin: "0 center"
    },
    [`&${componentCls}-icon`]: {
      fontSize,
      [`> ${iconCls}`]: {
        margin: 0
      }
    }
  });
  return {
    [componentCls]: {
      ...index.resetComponent(token),
      "position": "relative",
      "display": "inline-block",
      "overflow": "hidden",
      "color": avatarColor,
      "whiteSpace": "nowrap",
      "textAlign": "center",
      "verticalAlign": "middle",
      "background": avatarBg,
      "border": `${lineWidth}px ${lineType} transparent`,
      "&-image": {
        background: "transparent"
      },
      [`${antCls}-image-img`]: {
        display: "block"
      },
      ...avatarSizeStyle(containerSize, textFontSize, borderRadius),
      "&-lg": {
        ...avatarSizeStyle(containerSizeLG, textFontSizeLG, borderRadiusLG)
      },
      "&-sm": {
        ...avatarSizeStyle(containerSizeSM, textFontSizeSM, borderRadiusSM)
      },
      "> img": {
        display: "block",
        width: "100%",
        height: "100%",
        objectFit: "cover"
      }
    }
  };
};
const genGroupStyle = (token) => {
  const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token;
  return {
    [`${componentCls}-group`]: {
      "display": "inline-flex",
      [`${componentCls}`]: {
        borderColor: groupBorderColor
      },
      "> *:not(:first-child)": {
        marginInlineStart: groupOverlapping
      }
    },
    [`${componentCls}-group-popover`]: {
      [`${componentCls} + ${componentCls}`]: {
        marginInlineStart: groupSpace
      }
    }
  };
};
var useStyle = genComponentStyleHook.default(
  "Avatar",
  (token) => {
    const { colorTextLightSolid, colorTextPlaceholder } = token;
    const avatarToken = statistic.merge(token, {
      avatarBg: colorTextPlaceholder,
      avatarColor: colorTextLightSolid
    });
    return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
  },
  (token) => {
    const {
      controlHeight,
      controlHeightLG,
      controlHeightSM,
      fontSize,
      fontSizeLG,
      fontSizeXL,
      fontSizeHeading3,
      marginXS,
      marginXXS,
      colorBorderBg
    } = token;
    return {
      containerSize: controlHeight,
      containerSizeLG: controlHeightLG,
      containerSizeSM: controlHeightSM,
      textFontSize: Math.round((fontSizeLG + fontSizeXL) / 2),
      textFontSizeLG: fontSizeHeading3,
      textFontSizeSM: fontSize,
      groupSpace: marginXXS,
      groupOverlapping: -marginXS,
      groupBorderColor: colorBorderBg
    };
  }
);

exports.default = useStyle;
//# sourceMappingURL=index.cjs.map
