import styled, {css} from "styled-components";

const Button = styled.button`
  background-color: ${props => props.color ? props.theme.colors[props.color] : props.theme.colors.green};
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  height: 40px;
  font-weight: 700;
  border-radius: 2px;
  font-family: 'Roboto', sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  :active, :focus {
      outline: none;
      border: none;
  }
  :hover {
    background-color: ${props => props.color ? props.theme.colors.darkBlue : props.theme.colors.darkGreen};
  }
  :active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }
  ${props => props.theme.shadow}
  ${props => props.disabled && css`
      background-color: ${props => props.theme.colors.lightGrey};
      pointer-events: none;
      user-select: none;
  `}
`

export default Button
