'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:calc(100% + 0.2em);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 base = exports.base = (0, _styledComponents.css)(['color:', ';font-family:', ';text-decoration:none;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;position:relative;height:auto;margin:auto;&:focus{outline:none;}&:active{color:', ';}&::after{content:\'\';background:', ';border-radius:2em;height:1px;width:100%;position:absolute;bottom:-0.1em;left:0;transition:height 0.15s ease,width 0.15s ease,left 0.15s ease,opacity 0.25s ease;', ';}&:hover::after,&:focus::after{', ';}'], color, (0, _themeGet2.default)('fonts.brand'), (0, _themeGet2.default)('colors.primary.default'), color, function (_ref) {
  var appearFocused = _ref.appearFocused;
  return appearFocused ? focusAfterStyles : '';
}, focusAfterStyles);

var dangerColor = (0, _themeGet2.default)('colors.negative.default');
var negative = exports.negative = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], dangerColor, (0, _themeGet2.default)('colors.negative.dark'), dangerColor);

var positiveColor = (0, _themeGet2.default)('colors.positive.default');
var positive = exports.positive = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], positiveColor, (0, _themeGet2.default)('colors.positive.dark'), positiveColor);

var darkColor = (0, _themeGet2.default)('colors.primary.dark');
var dark = exports.dark = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], darkColor, (0, _themeGet2.default)('colors.primary.dark'), darkColor);

var invertedColor = (0, _themeGet2.default)('colors.text.inverted');
var inverted = exports.inverted = (0, _styledComponents.css)(['color:', ';&:active{color:', ';}&::after{background:', ';}'], invertedColor, (0, _themeGet2.default)('colors.text.inverted'), invertedColor);