'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.inverted = exports.dark = exports.positive = exports.negative = exports.base = undefined;

var _styledComponents = require('styled-components');

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

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

var focusAfterStyles = (0, _styledComponents.css)(['height:100%;width:calc(100% + 0.6em);left:-0.3em;opacity:0.125;transition:height 0.15s ease,width 0.15s ease,left 0.15s ease,opacity 0s ease;']);

var color = (0, _themeGet2.default)('colors.primary.alternate');
var disabledColor = (0, _themeGet2.default)('colors.text.default');

var reactiveStyles = function reactiveStyles(appearFocused) {
  return (0, _styledComponents.css)(['&::after{content:\'\';background:', ';border-radius:2em;height:1px;width:100%;position:absolute;bottom:0;left:0;transition:height 0.15s ease,width 0.15s ease,left 0.15s ease,opacity 0.25s ease;', ';}&:hover::after,&:focus::after{', ';}'], color, appearFocused ? focusAfterStyles : '', focusAfterStyles);
};

var base = exports.base = (0, _styledComponents.css)(['color:', ';font-family:', ';opacity:', ';text-decoration:none;cursor:', ';transition:all 0.2s ease;white-space:nowrap;position:relative;height:auto;margin:auto;', ' &:focus{outline:none;}&:active{color:', ';}', ';'], function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? disabledColor : color;
}, (0, _themeGet2.default)('fonts.brand'), function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? '0.5' : '1';
}, function (_ref3) {
  var disabled = _ref3.disabled;
  return disabled ? 'default' : 'pointer';
}, function (_ref4) {
  var disabled = _ref4.disabled;
  return disabled ? 'pointer-events: none;' : '';
}, function (_ref5) {
  var disabled = _ref5.disabled;
  return disabled ? disabledColor : (0, _themeGet2.default)('colors.primary.default');
}, function (_ref6) {
  var disabled = _ref6.disabled,
      appearFocused = _ref6.appearFocused;
  return disabled ? '' : reactiveStyles(appearFocused);
});

var dangerColor = (0, _themeGet2.default)('colors.negative.default');
var negative = exports.negative = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], function (_ref7) {
  var disabled = _ref7.disabled;
  return disabled ? disabledColor : dangerColor;
}, function (_ref8) {
  var disabled = _ref8.disabled;
  return disabled ? '' : (0, _themeGet2.default)('colors.negative.dark');
}, function (_ref9) {
  var disabled = _ref9.disabled;
  return disabled ? '' : dangerColor;
});

var positiveColor = (0, _themeGet2.default)('colors.positive.default');
var positive = exports.positive = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], function (_ref10) {
  var disabled = _ref10.disabled;
  return disabled ? disabledColor : positiveColor;
}, function (_ref11) {
  var disabled = _ref11.disabled;
  return disabled ? '' : (0, _themeGet2.default)('colors.positive.dark');
}, function (_ref12) {
  var disabled = _ref12.disabled;
  return disabled ? '' : positiveColor;
});

var darkColor = (0, _themeGet2.default)('colors.primary.dark');
var dark = exports.dark = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], function (_ref13) {
  var disabled = _ref13.disabled;
  return disabled ? disabledColor : darkColor;
}, function (_ref14) {
  var disabled = _ref14.disabled;
  return disabled ? '' : (0, _themeGet2.default)('colors.primary.dark');
}, function (_ref15) {
  var disabled = _ref15.disabled;
  return disabled ? '' : darkColor;
});

var invertedColor = (0, _themeGet2.default)('colors.text.inverted');
var inverted = exports.inverted = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], function (_ref16) {
  var disabled = _ref16.disabled;
  return disabled ? disabledColor : invertedColor;
}, function (_ref17) {
  var disabled = _ref17.disabled;
  return disabled ? '' : (0, _themeGet2.default)('colors.text.inverted');
}, function (_ref18) {
  var disabled = _ref18.disabled;
  return disabled ? '' : invertedColor;
});