"use strict";

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

var _colors = require("../colors");

var _colors2 = _interopRequireDefault(_colors);

var _animations = require("../animations");

var _animations2 = _interopRequireDefault(_animations);

var _fontSizes = require("../fontSizes");

var _fontSizes2 = _interopRequireDefault(_fontSizes);

var _fonts = require("../fonts");

var _fonts2 = _interopRequireDefault(_fonts);

var _tones = require("../tones");

var _tones2 = _interopRequireDefault(_tones);

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

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

var base = function base(props) {
  var _ref = props || {},
      _ref$loading = _ref.loading,
      loading = _ref$loading === void 0 ? false : _ref$loading;

  return {
    alignItems: "center",
    border: _colors2["default"].grey[60],
    borderRadius: _presets.radius["default"],
    boxSizing: "border-box",
    cursor: "pointer",
    display: "inline-flex",
    fontFamily: _fonts2["default"].header.join(","),
    justifyContent: "center",
    transition: "background 0.5s, border 0.5s, color 0.5s",
    lineHeight: "1",
    textDecoration: "none",
    "&[disabled], &[disabled]:hover": {
      cursor: "not-allowed",
      opacity: !loading ? 0.5 : 0.9
    },
    svg: {
      animation: loading ? "".concat(_animations2["default"].iconLoadingAnim, " 1s linear infinite") : "",
      flexShrink: "0",
      margin: "0 ".concat(_presets.spaces["2xs"]),
      transform: "scale(1)",
      "&:last-child": {
        marginRight: "-0.25em"
      },
      "&:first-child": {
        marginLeft: "-0.30em"
      }
    },
    "&:hover:not([disabled])": {
      svg: {
        animation: !loading ? "".concat(_animations2["default"].iconHoverAnim, " 1s linear infinite") : ""
      }
    }
  };
};

var sizes = {
  S: {
    fontSize: _fontSizes2["default"][1],
    minHeight: "1.6rem",
    padding: "0.3rem 0.5rem"
  },
  M: {
    fontSize: _fontSizes2["default"][2],
    minHeight: "2rem",
    padding: "0.45rem 0.75rem"
  },
  L: {
    fontSize: _fontSizes2["default"][3],
    minHeight: "2.4rem",
    padding: "0.55rem 1rem"
  },
  XL: {
    fontSize: _fontSizes2["default"][5],
    minHeight: "3.25rem",
    padding: "0.65rem 1.25rem"
  }
};
var variants = {
  PRIMARY: function PRIMARY(_ref2) {
    var tone = _ref2.tone;
    return {
      background: _tones2["default"][tone].dark,
      border: "1px solid ".concat(_tones2["default"][tone].dark),
      color: _colors2["default"].white,
      fontWeight: "bold",
      ":hover": {
        background: _tones2["default"][tone].darker,
        border: "1px solid ".concat(_tones2["default"][tone].darker)
      }
    };
  },
  SECONDARY: function SECONDARY(_ref3) {
    var tone = _ref3.tone;
    return {
      background: "transparent",
      border: "1px solid ".concat(_tones2["default"][tone].light),
      color: _tones2["default"][tone].medium,
      ":hover": {
        borderColor: _tones2["default"][tone].dark,
        color: _tones2["default"][tone].dark
      }
    };
  },
  GHOST: function GHOST(_ref4) {
    var tone = _ref4.tone;
    return {
      background: "transparent",
      border: "1px solid transparent",
      color: _tones2["default"][tone].medium,
      ":hover": {
        background: _tones2["default"][tone].superLight,
        color: _tones2["default"][tone].dark
      }
    };
  }
};
var button = {
  base: base,
  sizes: sizes,
  variants: variants
};
exports["default"] = button;