"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledBaseButton = undefined;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactEmotion = require("react-emotion");

var _reactEmotion2 = _interopRequireDefault(_reactEmotion);

var _presets = require("../../utils/presets");

var _Button = require("./Button.Skeleton");

var _Button2 = _interopRequireDefault(_Button);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var loading =
/*#__PURE__*/
(0, _reactEmotion.keyframes)("0%{transform:translateX(0.2em) rotate(0);}100%{transform:translateX(0.2em) rotate(360deg);}");
var pulse =
/*#__PURE__*/
(0, _reactEmotion.keyframes)("33%{transform:translateX(0.2em) scale(1.05);}66%{transform:translateX(0.2em) scale(0.85);}");
var sizes = {
  S: {
    fontSize: 0.875,
    height: 1.5,
    horizontalPadding: 0.5,
    verticalPadding: 0.3
  },
  M: {
    fontSize: 1,
    height: 2,
    horizontalPadding: 0.75,
    verticalPadding: 0.45
  },
  L: {
    fontSize: 1.125,
    height: 2.25,
    horizontalPadding: 1,
    verticalPadding: 0.55
  },
  XL: {
    fontSize: 1.5,
    height: 3.25,
    horizontalPadding: 1.25,
    verticalPadding: 0.65
  }
};
var StyledBaseButton =
/*#__PURE__*/
exports.StyledBaseButton = (0, _reactEmotion2["default"])(_Button.SkeletonStyledComponent, {
  target: "e2s9gwk0"
})("align-items:center;border:", _presets.palette.grey[600], ";border-radius:", _presets.radius["default"], ";box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:", _presets.fontFamilies.headerFontFamily, ";font-size:", function (props) {
  return sizes[props.size].fontSize;
}, "rem;justify-content:center;line-height:1;min-height:", function (props) {
  return sizes[props.size].height;
}, "rem;padding:", function (props) {
  return sizes[props.size].verticalPadding;
}, "rem ", function (props) {
  return sizes[props.size].horizontalPadding;
}, "rem;text-decoration:none;transition:0.5s;&[disabled],&[disabled]:hover{cursor:not-allowed;opacity:0.5;}svg{animation:", function (props) {
  return props.loading ? "".concat(loading, " 1s linear infinite") : "";
}, ";flex-shrink:0;transform:translateX(0.2em) scale(1);}&:hover:not([disabled]){svg{animation:", pulse, " 1s linear infinite;}}");

var BaseButton = function BaseButton(props) {
  return _react2["default"].createElement(_Button2["default"], Object.assign({
    StyledComponent: StyledBaseButton
  }, props));
};

BaseButton.propTypes = _Button.buttonPropTypes;
BaseButton.defaultProps = _Button.buttonDefaultPropTypes;
exports["default"] = BaseButton;