var __rest = this && this.__rest || function (s, e) {
    var t = {};
    for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
    }return t;
};
import React from 'react';
import * as sizes from '../../mixins/sizes';
import * as fonts from '../../mixins/fonts';
import * as fontSmoothing from '../../mixins/font-smoothing';
import * as moreLinksAndButtons from '../../mixins/more-links-and-buttons';
import * as colors from '../../mixins/colors';
import { InlineBlock } from 'jsxstyle';
import { darken } from 'polished';
import prefixKeys from '../../utilities/prefix-object-keys';
var activeStyle = {
    // Implement active button background color change as box shadow mask.
    boxShadow: 'inset 0 .125em .375em ' + 'rgba(0,0,0,0.125)' + ', inset 0 0 0 999em ' + 'rgba(0,0,0,0.125)'
};
var baseStyles = Object.assign({}, fontSmoothing.subpixelAntialiasedFonts, { backgroundColor: colors.buttonBackgroundColor, border: 0, borderRadius: sizes.standardInputRadius, color: colors.buttonColor, cursor: 'pointer', display: 'inline-block', fontFamily: fonts.sansSerif, fontSize: sizes.standardInputFontSize, fontWeight: 400, letterSpacing: '.04em', lineHeight: 1.2, margin: 0, padding: '.6em 1em', position: 'relative', textAlign: 'center', textDecoration: 'none', textIndent: '.04em', textRendering: 'optimizeLegibility', userSelect: 'none', transition: 'none !important' }, prefixKeys('hover', {
    // Implement button hover background color change as box shadow mask.
    boxShadow: 'inset 0 0 0 999em ' + 'rgba(0,0,0,0.0625)',
    textDecoration: 'none'
}), prefixKeys('hoverActive', activeStyle), prefixKeys('beforeFocus', {
    content: '""',
    position: 'absolute',
    zIndex: 1,
    boxShadow: 'inset 0 0 0 1px #fff',
    top: 2,
    right: 2,
    bottom: 2,
    left: 2,
    borderRadius: '.1em',
    pointerEvents: 'none',
    transition: 'opacity .3s ease-in-out'
}), prefixKeys('focus', {
    outline: 'none',
    activeBeforeOpacity: 0
}));
export var types = {
    primary: {
        backgroundColor: colors.buttonPrimaryBackgroundColor,
        color: '#fff'
    },
    success: {
        backgroundColor: colors.accentGreen,
        color: '#fff'
    },
    warning: {
        backgroundColor: colors.buttonRedBackgroundColor,
        color: '#fff'
    },
    secondary: {
        backgroundColor: colors.buttonPrimaryBackgroundColor,
        color: '#fff'
    },
    tertiary: {
        backgroundColor: colors.tertiaryButtonColor,
        color: '#fff'
    },
    twitter: {
        backgroundColor: colors.twitterBlue,
        color: '#fff'
    },
    black: {
        backgroundColor: '#000',
        color: '#fff',
        activeBackground: colors.darkerGray
    },
    white: {
        backgroundColor: '#fff',
        color: '#000'
    },
    gray: Object.assign({ backgroundColor: colors.backgroundGray, color: colors.darkGray }, prefixKeys('activeHover', {
        borderColor: [darken(0.25, colors.lightLineGray), darken(0.15, colors.lightLineGray), darken(0.5, colors.lightLineGray)].join(' ')
    })),
    transparent: Object.assign({ fontWeight: 400, borderBottom: 0, backgroundColor: 'transparent', boxShadow: 'inset 0 0 0 1px ' + colors.lightLineGrayRgba, color: 'rgba(0,0,0,0.55)' }, prefixKeys('hover', {
        color: '#fff',
        backgroundColor: colors.accentGray2
    }))
};
function createButtonLikeComponent(component) {
    var Button = function Button(props) {
        var active = props.active,
            disabled = props.disabled,
            size = props.size,
            slim = props.slim,
            type = props.type,
            withMoreIconAfter = props.withMoreIconAfter,
            withMoreIconBefore = props.withMoreIconBefore,
            passableProps = __rest(props, ["active", "disabled", "size", "slim", "type", "withMoreIconAfter", "withMoreIconBefore"]);

        var passedProps = Object.assign({}, passableProps);
        passedProps.props = Object.assign({}, passedProps.props, { 'data-type': type });
        var propsToStyles = [baseStyles, active && activeStyle, disabled && {
            opacity: 0.7,
            cursor: 'default',
            boxShadow: 'none !important',
            '&:hover, &:focus, &:focus:hover': {
                pointerEvents: 'none',
                boxShadow: 'none !important'
            }
        }, slim && {
            paddingLeft: '1em',
            paddingRight: '1em'
        }, type && types[type], withMoreIconBefore && moreLinksAndButtons.withMoreIconBefore, withMoreIconAfter && moreLinksAndButtons.withMoreIconAfter
        // size && sizeVarients[size],
        ];
        propsToStyles.filter(function (entry) {
            return !!entry;
        }).forEach(function (properties) {
            return Object.assign(passedProps, properties);
        });
        return React.createElement(InlineBlock, Object.assign({ component: component }, passedProps));
    };
    return Button;
}
export var Button = createButtonLikeComponent('button');
export var AnchorButton = createButtonLikeComponent('a');
export default Button;
//# sourceMappingURL=button.js.map