import React from 'react';
// eslint-disable-next-line import/named
import { css } from 'styled-components';
import styled from 'styled-components/macro';
import { Icon } from '../Icon';
const cssStyle = ({ light }) => css `
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0.7em 1em;
  outline: none;
  border: none;
  border-radius: 3px;
  background: ${light ? 'transparent' : 'var(--primary-color)'};
  color: ${light ? 'var(--accent-color)' : '#fff'};
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8em;
  line-height: 1;
  transition: all 0.3s cubic - bezier(0.55, 0, 0.1, 1);
  min-height: var(--input-min-height);
  :hover {
    background-color: ${light ? 'rgba(0, 0, 0, 0.05)' : 'var(--accent-color)'};
  }
  & > span:not(:empty) {
    margin-left: 0.4em;
  }
`;
export const StyledButton = styled.button `
  ${(p) => cssStyle(p)}
`;
export const StyledLink = styled.a `
  ${(p) => cssStyle(p)}
  padding-top: 0;
  padding-bottom: 0;
`;
export const Button = ({ icon, children, css: style, ...props }) => {
    const renderMutualContent = (React.createElement(React.Fragment, null,
        icon && React.createElement(Icon, { path: icon }),
        children && React.createElement("span", null, children)));
    return 'asLink' in props && props.asLink === true ? (React.createElement(StyledLink, Object.assign({ css: style }, props), renderMutualContent)) : (React.createElement(StyledButton, Object.assign({ type: "button", css: style }, props), renderMutualContent));
};
//# sourceMappingURL=index.js.map