import { css } from 'styled-components';
import { BaseButtonProps } from 'types';
import {
	borderRadiusDecorator,
	buttonLineHeightBySizeDecorator,
	buttonSizeDecorator,
	elevationDecorator,
	heightDecorator,
	marginDecorator,
	paddingDecorator,
	positionDecorator,
	widthDecorator,
} from 'utils';

export const base = ({ elevation, size, ...rest }: BaseButtonProps) => css`
	box-sizing: border-box;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0.25rem 0.5rem;
	text-align: center;
	text-decoration: none;
	transition: transform 0.1s ease-in-out;
	:active {
		transform: translateY(2px);
	}
	${borderRadiusDecorator(rest)}
	${buttonLineHeightBySizeDecorator(size)}
	${buttonSizeDecorator(size)}
	${elevationDecorator({ elevation })}
	${heightDecorator(rest)}
  ${marginDecorator(rest)}
  ${paddingDecorator(rest)}
  ${positionDecorator(rest)}
	${widthDecorator(rest)}
`;