import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { Keyframes } from '@ant-design/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../theme';
var antdDrawerFadeIn = new Keyframes('antDrawerFadeIn', {
  '0%': {
    opacity: 0
  },
  '100%': {
    opacity: 1
  }
}); // =============================== Base ===============================

var genBaseStyle = function genBaseStyle(token) {
  var _$concat2, _$concat3, _$concat4, _$concat7, _ref;

  var componentCls = token.componentCls,
      motionEaseOut = token.motionEaseOut,
      motionDurationSlow = token.motionDurationSlow,
      fontSizeLG = token.fontSizeLG,
      paddingLG = token.paddingLG,
      lineWidth = token.lineWidth,
      radiusBase = token.radiusBase,
      fontSize = token.fontSize,
      lineHeight = token.lineHeight,
      drawerFooterPaddingVertical = token.drawerFooterPaddingVertical,
      drawerFooterPaddingHorizontal = token.drawerFooterPaddingHorizontal,
      zIndexPopupBase = token.zIndexPopupBase,
      colorText = token.colorText,
      padding = token.padding,
      lineType = token.lineType,
      colorSplit = token.colorSplit;
  return _ref = {}, _defineProperty(_ref, "".concat(componentCls), (_$concat7 = {
    position: 'fixed',
    zIndex: zIndexPopupBase,
    width: 0,
    height: '100%',
    transition: "width 0s ease ".concat(motionDurationSlow, ", height 0s ease ").concat(motionDurationSlow)
  }, _defineProperty(_$concat7, "".concat(componentCls, "-content-wrapper"), _defineProperty({
    position: 'absolute',
    width: '100%',
    height: '100%',
    transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseOut, ",box-shadow ").concat(motionDurationSlow, " ").concat(motionEaseOut)
  }, "".concat(componentCls, "-content"), _defineProperty({
    width: '100%',
    height: '100%',
    position: 'relative',
    zIndex: 1,
    overflow: 'auto',
    backgroundColor: token.colorBgElevated,
    backgroundClip: "padding-box",
    border: 0
  }, "".concat(componentCls, "-wrapper-body"), (_$concat4 = {
    display: 'flex',
    flexFlow: 'column nowrap',
    width: '100%',
    height: '100%'
  }, _defineProperty(_$concat4, "".concat(componentCls, "-header"), (_$concat3 = {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: "".concat(padding, "px ").concat(paddingLG, "px"),
    color: colorText,
    background: token.colorBgElevated,
    borderBottom: "".concat(lineWidth, "px ").concat(lineType, " ").concat(colorSplit),
    borderRadius: "".concat(radiusBase, "px ").concat(radiusBase, "px 0 0")
  }, _defineProperty(_$concat3, "".concat(componentCls, "-header-title"), (_$concat2 = {
    display: 'flex',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between'
  }, _defineProperty(_$concat2, "".concat(componentCls, "-title"), {
    flex: 1,
    margin: 0,
    color: colorText,
    fontWeight: token.fontWeightStrong,
    fontSize: fontSizeLG,
    lineHeight: token.lineHeightLG
  }), _defineProperty(_$concat2, "".concat(componentCls, "-close"), _defineProperty({
    display: 'inline-block',
    marginInlineEnd: token.marginSM,
    color: token.colorIcon,
    fontWeight: token.fontWeightStrong,
    fontSize: fontSizeLG,
    fontStyle: 'normal',
    lineHeight: 1,
    textAlign: 'center',
    textTransform: 'none',
    textDecoration: 'none',
    background: 'transparent',
    border: 0,
    outline: 0,
    cursor: 'pointer',
    transition: "color ".concat(motionDurationSlow),
    textRendering: 'auto'
  }, "&:focus, &:hover", {
    color: token.colorIconHover,
    textDecoration: 'none'
  })), _$concat2)), _defineProperty(_$concat3, "".concat(componentCls, "-header-close-only"), {
    paddingBottom: 0,
    border: 'none'
  }), _$concat3)), _defineProperty(_$concat4, "".concat(componentCls, "-body"), {
    flexGrow: 1,
    padding: paddingLG,
    overflow: 'auto',
    fontSize: fontSize,
    lineHeight: lineHeight,
    wordWrap: 'break-word'
  }), _defineProperty(_$concat4, "".concat(componentCls, "-footer"), {
    flexShrink: 0,
    padding: "".concat(drawerFooterPaddingVertical, "px ").concat(drawerFooterPaddingHorizontal, "px"),
    borderTop: "".concat(lineWidth, "px ").concat(lineType, " ").concat(colorSplit)
  }), _$concat4)))), _defineProperty(_$concat7, "".concat(componentCls, "-mask"), {
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    width: '100%',
    height: 0,
    backgroundColor: token.colorBgMask,
    opacity: 0,
    transition: "opacity ".concat(motionDurationSlow, " linear, height 0s ease ").concat(motionDurationSlow),
    pointerEvents: 'none'
  }), _$concat7)), _defineProperty(_ref, "".concat(componentCls).concat(componentCls, "-open ").concat(componentCls, "-mask"), {
    height: '100%',
    opacity: 1,
    transition: 'none',
    animationName: antdDrawerFadeIn,
    animationDuration: token.motionDurationSlow,
    animationTimingFunction: motionEaseOut,
    pointerEvents: 'auto'
  }), _ref;
};

var genDrawerStyle = function genDrawerStyle(token) {
  var _ref2;

  var componentCls = token.componentCls,
      motionDurationSlow = token.motionDurationSlow,
      lineWidth = token.lineWidth,
      motionEaseOut = token.motionEaseOut;
  return _ref2 = {}, _defineProperty(_ref2, "".concat(componentCls, "-left"), _defineProperty({
    insetInlineStart: 0,
    insetBlockStart: 0,
    width: 0,
    height: '100%'
  }, "".concat(componentCls, "-content-wrapper"), {
    height: '100%',
    insetInlineStart: 0
  })), _defineProperty(_ref2, "".concat(componentCls, "-left").concat(componentCls, "-open"), _defineProperty({
    width: '100%',
    transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseOut)
  }, "".concat(componentCls, "-content-wrapper"), {
    boxShadow: token.boxShadowDrawerRight
  })), _defineProperty(_ref2, "".concat(componentCls, "-right"), _defineProperty({
    insetInlineEnd: 0,
    insetBlockStart: 0,
    width: 0,
    height: '100%'
  }, "".concat(componentCls, "-content-wrapper"), {
    height: '100%',
    insetInlineEnd: 0
  })), _defineProperty(_ref2, "".concat(componentCls, "-right").concat(componentCls, "-open"), _defineProperty({
    width: '100%',
    transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseOut)
  }, "".concat(componentCls, "-content-wrapper"), {
    boxShadow: token.boxShadowDrawerLeft
  })), _defineProperty(_ref2, "".concat(componentCls, "-right").concat(componentCls, "-open.no-mask"), {
    insetInlineEnd: lineWidth,
    transform: "translateX(".concat(lineWidth, ")")
  }), _defineProperty(_ref2, "".concat(componentCls, "-top,").concat(componentCls, "-bottom"), _defineProperty({
    insetInlineStart: 0,
    width: '100%',
    height: 0
  }, "".concat(componentCls, "-content-wrapper"), {
    width: '100%'
  })), _defineProperty(_ref2, "".concat(componentCls, "-top").concat(componentCls, "-open,").concat(componentCls, "-bottom").concat(componentCls, "-open"), {
    height: '100%',
    transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseOut)
  }), _defineProperty(_ref2, "".concat(componentCls, "-top"), {
    insetBlockStart: 0
  }), _defineProperty(_ref2, "".concat(componentCls, "-top").concat(componentCls, "-open"), _defineProperty({}, "".concat(componentCls, "-content-wrapper"), {
    boxShadow: token.boxShadowDrawerDown
  })), _defineProperty(_ref2, "".concat(componentCls, "-bottom"), _defineProperty({
    bottom: 0
  }, "".concat(componentCls, "-content-wrapper"), {
    bottom: 0
  })), _defineProperty(_ref2, "".concat(componentCls, "-bottom").concat(componentCls, "-bottom-open"), _defineProperty({}, "".concat(componentCls, "-content-wrapper"), {
    boxShadow: token.boxShadowDrawerUp
  })), _defineProperty(_ref2, "".concat(componentCls, "-bottom").concat(componentCls, "-bottom-open.no-mask"), {
    insetBlockEnd: lineWidth,
    transform: "translateY(".concat(lineWidth, ")")
  }), _ref2;
}; // ============================== Export ==============================


export default genComponentStyleHook('Drawer', function (token) {
  var drawerToken = mergeToken(token, {
    drawerFooterPaddingVertical: token.paddingXS,
    drawerFooterPaddingHorizontal: token.padding
  });
  return [genBaseStyle(drawerToken), genDrawerStyle(drawerToken)];
});