import '../../../theme/index.mjs';
import Keyframe from '../../../theme/cssinjs/Keyframes.mjs';
import genComponentStyleHook from '../../../theme/token/util/genComponentStyleHook.mjs';
import { merge } from '../../../theme/token/util/statistic.mjs';

const skeletonClsLoading = new Keyframe("ant-skeleton-loading", {
  "0%": {
    transform: "translateX(-37.5%)"
  },
  "100%": {
    transform: "translateX(37.5%)"
  }
});
function genSkeletonElementCommonSize(size) {
  return {
    height: size,
    lineHeight: `${size}px`
  };
}
function genSkeletonElementAvatarSize(size) {
  return {
    width: size,
    ...genSkeletonElementCommonSize(size)
  };
}
function genSkeletonColor(token) {
  return {
    "position": "relative",
    // fix https://github.com/ant-design/ant-design/issues/36444
    // https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/
    /* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
    "zIndex": 0,
    "overflow": "hidden",
    "background": "transparent",
    "&::after": {
      position: "absolute",
      top: 0,
      insetInlineEnd: "-150%",
      bottom: 0,
      insetInlineStart: "-150%",
      background: token.skeletonLoadingBackground,
      animationName: skeletonClsLoading,
      animationDuration: token.skeletonLoadingMotionDuration,
      animationTimingFunction: "ease",
      animationIterationCount: "infinite",
      content: '""'
    }
  };
}
function genSkeletonElementInputSize(size) {
  return {
    width: size * 5,
    minWidth: size * 5,
    ...genSkeletonElementCommonSize(size)
  };
}
function genSkeletonElementAvatar(token) {
  const { skeletonAvatarCls, color, controlHeight, controlHeightLG, controlHeightSM } = token;
  return {
    [`${skeletonAvatarCls}`]: {
      display: "inline-block",
      verticalAlign: "top",
      background: color,
      ...genSkeletonElementAvatarSize(controlHeight)
    },
    [`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: {
      borderRadius: "50%"
    },
    [`${skeletonAvatarCls}${skeletonAvatarCls}-lg`]: {
      ...genSkeletonElementAvatarSize(controlHeightLG)
    },
    [`${skeletonAvatarCls}${skeletonAvatarCls}-sm`]: {
      ...genSkeletonElementAvatarSize(controlHeightSM)
    }
  };
}
function genSkeletonElementInput(token) {
  const {
    controlHeight,
    borderRadiusSM,
    skeletonInputCls,
    controlHeightLG,
    controlHeightSM,
    color
  } = token;
  return {
    [`${skeletonInputCls}`]: {
      display: "inline-block",
      verticalAlign: "top",
      background: color,
      borderRadius: borderRadiusSM,
      ...genSkeletonElementInputSize(controlHeight)
    },
    [`${skeletonInputCls}-lg`]: {
      ...genSkeletonElementInputSize(controlHeightLG)
    },
    [`${skeletonInputCls}-sm`]: {
      ...genSkeletonElementInputSize(controlHeightSM)
    }
  };
}
function genSkeletonElementImageSize(size) {
  return {
    width: size,
    ...genSkeletonElementCommonSize(size)
  };
}
function genSkeletonElementImage(token) {
  const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token;
  return {
    [`${skeletonImageCls}`]: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      verticalAlign: "top",
      background: color,
      borderRadius: borderRadiusSM,
      ...genSkeletonElementImageSize(imageSizeBase * 2),
      [`${skeletonImageCls}-path`]: {
        fill: "#bfbfbf"
      },
      [`${skeletonImageCls}-svg`]: {
        ...genSkeletonElementImageSize(imageSizeBase),
        maxWidth: imageSizeBase * 4,
        maxHeight: imageSizeBase * 4
      },
      [`${skeletonImageCls}-svg${skeletonImageCls}-svg-circle`]: {
        borderRadius: "50%"
      }
    },
    [`${skeletonImageCls}${skeletonImageCls}-circle`]: {
      borderRadius: "50%"
    }
  };
}
function genSkeletonElementButtonShape(token, size, buttonCls) {
  const { skeletonButtonCls } = token;
  return {
    [`${buttonCls}${skeletonButtonCls}-circle`]: {
      width: size,
      minWidth: size,
      borderRadius: "50%"
    },
    [`${buttonCls}${skeletonButtonCls}-round`]: {
      borderRadius: size
    }
  };
}
function genSkeletonElementButtonSize(size) {
  return {
    width: size * 2,
    minWidth: size * 2,
    ...genSkeletonElementCommonSize(size)
  };
}
function genSkeletonElementButton(token) {
  const {
    borderRadiusSM,
    skeletonButtonCls,
    controlHeight,
    controlHeightLG,
    controlHeightSM,
    color
  } = token;
  return {
    [`${skeletonButtonCls}`]: {
      display: "inline-block",
      verticalAlign: "top",
      background: color,
      borderRadius: borderRadiusSM,
      width: controlHeight * 2,
      minWidth: controlHeight * 2,
      ...genSkeletonElementButtonSize(controlHeight)
    },
    ...genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls),
    [`${skeletonButtonCls}-lg`]: {
      ...genSkeletonElementButtonSize(controlHeightLG)
    },
    ...genSkeletonElementButtonShape(token, controlHeightLG, `${skeletonButtonCls}-lg`),
    [`${skeletonButtonCls}-sm`]: {
      ...genSkeletonElementButtonSize(controlHeightSM)
    },
    ...genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`)
  };
}
const genBaseStyle = (token) => {
  const {
    componentCls,
    skeletonAvatarCls,
    skeletonTitleCls,
    skeletonParagraphCls,
    skeletonButtonCls,
    skeletonInputCls,
    skeletonImageCls,
    controlHeight,
    controlHeightLG,
    controlHeightSM,
    color,
    padding,
    marginSM,
    borderRadius,
    skeletonTitleHeight,
    skeletonBlockRadius,
    skeletonParagraphLineHeight,
    controlHeightXS,
    skeletonParagraphMarginTop
  } = token;
  return {
    [`${componentCls}`]: {
      display: "table",
      width: "100%",
      [`${componentCls}-header`]: {
        display: "table-cell",
        paddingInlineEnd: padding,
        verticalAlign: "top",
        // Avatar
        [`${skeletonAvatarCls}`]: {
          display: "inline-block",
          verticalAlign: "top",
          background: color,
          ...genSkeletonElementAvatarSize(controlHeight)
        },
        [`${skeletonAvatarCls}-circle`]: {
          borderRadius: "50%"
        },
        [`${skeletonAvatarCls}-lg`]: {
          ...genSkeletonElementAvatarSize(controlHeightLG)
        },
        [`${skeletonAvatarCls}-sm`]: {
          ...genSkeletonElementAvatarSize(controlHeightSM)
        }
      },
      [`${componentCls}-content`]: {
        display: "table-cell",
        width: "100%",
        verticalAlign: "top",
        // Title
        [`${skeletonTitleCls}`]: {
          width: "100%",
          height: skeletonTitleHeight,
          background: color,
          borderRadius: skeletonBlockRadius,
          [`+ ${skeletonParagraphCls}`]: {
            marginBlockStart: controlHeightSM
          }
        },
        // paragraph
        [`${skeletonParagraphCls}`]: {
          "padding": 0,
          "> li": {
            "width": "100%",
            "height": skeletonParagraphLineHeight,
            "listStyle": "none",
            "background": color,
            "borderRadius": skeletonBlockRadius,
            "+ li": {
              marginBlockStart: controlHeightXS
            }
          }
        },
        [`${skeletonParagraphCls}> li:last-child:not(:first-child):not(:nth-child(2))`]: {
          width: "61%"
        }
      },
      [`&-round ${componentCls}-content`]: {
        [`${skeletonTitleCls}, ${skeletonParagraphCls} > li`]: {
          borderRadius
        }
      }
    },
    [`${componentCls}-with-avatar ${componentCls}-content`]: {
      // Title
      [`${skeletonTitleCls}`]: {
        marginBlockStart: marginSM,
        [`+ ${skeletonParagraphCls}`]: {
          marginBlockStart: skeletonParagraphMarginTop
        }
      }
    },
    // Skeleton element
    [`${componentCls}${componentCls}-element`]: {
      display: "inline-block",
      width: "auto",
      ...genSkeletonElementButton(token),
      ...genSkeletonElementAvatar(token),
      ...genSkeletonElementInput(token),
      ...genSkeletonElementImage(token)
    },
    // Skeleton Block Button, Input
    [`${componentCls}${componentCls}-block`]: {
      width: "100%",
      [`${skeletonButtonCls}`]: {
        width: "100%"
      },
      [`${skeletonInputCls}`]: {
        width: "100%"
      }
    },
    // With active animation
    [`${componentCls}${componentCls}-active`]: {
      [`
        ${skeletonTitleCls},
        ${skeletonParagraphCls} > li,
        ${skeletonAvatarCls},
        ${skeletonButtonCls},
        ${skeletonInputCls},
        ${skeletonImageCls}
      `]: {
        ...genSkeletonColor(token)
      }
    }
  };
};
var useStyle = genComponentStyleHook(
  "Skeleton",
  (token) => {
    const { componentCls } = token;
    const skeletonToken = merge(token, {
      skeletonAvatarCls: `${componentCls}-avatar`,
      skeletonTitleCls: `${componentCls}-title`,
      skeletonParagraphCls: `${componentCls}-paragraph`,
      skeletonButtonCls: `${componentCls}-button`,
      skeletonInputCls: `${componentCls}-input`,
      skeletonImageCls: `${componentCls}-image`,
      imageSizeBase: token.controlHeight * 1.5,
      skeletonTitleHeight: token.controlHeight / 2,
      skeletonBlockRadius: token.borderRadiusSM,
      skeletonParagraphLineHeight: token.controlHeight / 2,
      skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
      borderRadius: 100,
      // Large number to make capsule shape
      skeletonLoadingBackground: `linear-gradient(90deg, ${token.color} 25%, ${token.colorGradientEnd} 37%, ${token.color} 63%)`,
      skeletonLoadingMotionDuration: "1.4s"
    });
    return [genBaseStyle(skeletonToken)];
  },
  (token) => {
    const { colorFillContent, colorFill } = token;
    return {
      color: colorFillContent,
      colorGradientEnd: colorFill
    };
  }
);

export { useStyle as default };
//# sourceMappingURL=index.mjs.map
