// @flow
import styled from 'styled-components';
import type { PatchworkComponent } from '../../../types';
import type { UnstyledButtonProps } from './unstyled-button.proptypes';
import { getBoxShadow, getFocusState } from './unstyled-button.css-rules';
import {
  FOCUS_VISIBLE_SELECTOR,
  focusedBorderRadius,
} from '../../../mixins/focus';

export const UnstyledButton: PatchworkComponent<UnstyledButtonProps> = styled.button.attrs(
  ({ type = 'button', role = 'button' }) => ({
    type,
    role,
  }),
)`
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 1;
  text-align: inherit;
  border-radius: ${focusedBorderRadius};
  ${getFocusState}
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${getBoxShadow};
  }
`;
