import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { keyframes } from '@emotion/core';

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  33% {\n    transform:  scale(1);\n    }\n  66% {\n    transform: scale(0.8);\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
function getButtonCss(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? "L" : _ref$size,
      _ref$tone = _ref.tone,
      tone = _ref$tone === void 0 ? "BRAND" : _ref$tone,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? "PRIMARY" : _ref$variant,
      leftIcon = _ref.leftIcon,
      rightIcon = _ref.rightIcon,
      loading = _ref.loading,
      _ref$textVariant = _ref.textVariant,
      textVariant = _ref$textVariant === void 0 ? "DEFAULT" : _ref$textVariant,
      _ref$width = _ref.width,
      width = _ref$width === void 0 ? "AUTO" : _ref$width;
  return function (theme) {
    return [getButtonBaseCss(textVariant)(theme), getButtonIconsCss({
      hasLeftIcon: !!leftIcon,
      hasRightIcon: !!rightIcon || loading
    })(theme), getButtonLoadingCss({
      loading: loading
    })(theme), getButtonVariantCss(variant, tone)(theme), getButtonSizeCss(size, textVariant)(theme), getButtonWidthCss(width)(theme)];
  };
}

function getButtonBaseCss(textVariant) {
  return function (theme) {
    return {
      alignItems: "center",
      border: theme.colors.grey[60],
      borderRadius: theme.radii[2],
      boxSizing: "border-box",
      cursor: "pointer",
      display: "inline-flex",
      fontFamily: textVariant === "BRAND" ? theme.fonts.heading : theme.fonts.body,
      justifyContent: "center",
      transition: "background ".concat(theme.transitions.speed["default"], ", border ").concat(theme.transitions.speed["default"], ", color ").concat(theme.transitions.speed["default"]),
      lineHeight: theme.lineHeights.solid,
      textDecoration: "none",
      "&[disabled], &[disabled]:hover": {
        cursor: "not-allowed",
        opacity: 0.5
      }
    };
  };
}

var animations = {
  iconLoadingAnim: keyframes(_templateObject()),
  iconHoverAnim: keyframes(_templateObject2())
};

function getButtonIconsCss(_ref2) {
  var hasLeftIcon = _ref2.hasLeftIcon,
      hasRightIcon = _ref2.hasRightIcon;
  return function (theme) {
    return {
      svg: {
        flexShrink: 0,
        margin: "0 ".concat(theme.space[2]),
        transform: "scale(1)",
        marginRight: hasRightIcon ? "-".concat(theme.space[2]) : undefined,
        marginLeft: hasLeftIcon ? "-0.30em" : undefined
      },
      "&:hover:not([disabled]), &:focus:not([disabled])": {
        svg: {
          animation: "".concat(animations.iconHoverAnim, " 1s linear infinite")
        }
      }
    };
  };
}

function getButtonLoadingCss(_ref3) {
  var loading = _ref3.loading;
  return function (_theme) {
    return loading ? {
      "&[disabled], &[disabled]:hover": {
        opacity: 0.9
      },
      svg: {
        animation: "".concat(animations.iconLoadingAnim, " 1s linear infinite")
      },
      "&:hover:not([disabled]), &:focus:not([disabled])": {
        svg: {
          animation: "none"
        }
      }
    } : {};
  };
}

function getButtonSizeCss(size, textVariant) {
  return function (theme) {
    if (size === "S") {
      return {
        fontSize: textVariant === "BRAND" ? theme.fontSizes[1] : theme.fontSizes[0],
        minHeight: "calc(".concat(theme.space[2], " * 7)"),
        minWidth: "calc(".concat(theme.space[2], " * 7)"),
        padding: "".concat(theme.space[2], " ").concat(theme.space[3])
      };
    }

    if (size === "M") {
      return {
        fontSize: textVariant === "BRAND" ? theme.fontSizes[2] : theme.fontSizes[1],
        minHeight: "calc(".concat(theme.space[2], " * 9)"),
        minWidth: "calc(".concat(theme.space[2], " * 9)"),
        padding: "".concat(theme.space[2], " ").concat(theme.space[4])
      };
    }

    if (size === "L") {
      return {
        fontSize: textVariant === "BRAND" ? theme.fontSizes[3] : theme.fontSizes[2],
        minHeight: theme.space[9],
        minWidth: theme.space[9],
        padding: "".concat(theme.space[2], " ").concat(theme.space[5])
      };
    }

    if (size === "XL") {
      return {
        fontSize: textVariant === "BRAND" ? theme.fontSizes[5] : theme.fontSizes[4],
        minHeight: theme.space[10],
        minWidth: theme.space[10],
        padding: "".concat(theme.space[3], " ").concat(theme.space[6])
      };
    }
  };
}

function getButtonVariantCss(variant, tone) {
  return function (theme) {
    if (variant === "PRIMARY") {
      return {
        background: theme.tones[tone].dark,
        border: "1px solid ".concat(theme.tones[tone].dark),
        color: theme.colors.white,
        fontWeight: theme.fontWeights.semiBold,
        ":hover": {
          background: theme.tones[tone].darker,
          border: "1px solid ".concat(theme.tones[tone].darker)
        }
      };
    }

    if (variant === "SECONDARY") {
      return {
        background: "transparent",
        border: "1px solid ".concat(theme.tones[tone].light),
        color: theme.tones[tone].text,
        ":hover": {
          borderColor: theme.tones[tone].dark,
          background: theme.tones[tone].superLight,
          color: theme.tones[tone].superDark
        }
      };
    }

    if (variant === "GHOST") {
      return {
        background: "transparent",
        border: "1px solid transparent",
        color: theme.tones[tone].text,
        ":hover": {
          background: theme.tones[tone].superLight,
          color: theme.tones[tone].superDark
        }
      };
    }

    return {};
  };
}

function getButtonWidthCss(buttonWidth) {
  return function (_theme) {
    return {
      width: buttonWidth === "FIT_CONTAINER" ? "100%" : undefined
    };
  };
}

export { getButtonCss };
//# sourceMappingURL=button.esm.js.map
