import React from 'react';
import { styled } from 'styleh-components';
import Button from '../BlueButton';
const GreyButtonNamed = (props) => (React.createElement(Button, Object.assign({}, props, { className: 'button grey-button ' + props.className })));
const GreyButton = styled(GreyButtonNamed) `
  @font(13, regular);
  font-weight: 900;
  background-color: var(--color-light-grey);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  align-self: flex-end;

  /* @todo @hack @fixme specificity issue - probably something is styling with classnames */
  &.grey {
    background-color: var(--color-light-grey);
  }


  ${props => (props.isDisabled || props.state === 'disabled') &&
    styled.css `
      opacity: 0.5;
      background-color: var(--color-dark-green);
    `}

  /* when the button has a link inside of it... */
  a {
    color: var(--color-dark-grey);
  }
`;
export { GreyButton };
export default GreyButton;
//# sourceMappingURL=index.js.map