import styled from 'styled-components';

export const Button = styled.button`
  padding: 1rem;
  width: 100%;
  display: block;
  background-color: transparent;
  border: 2px solid ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
  color: ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
  font-size: 1rem;
  border-radius: 1rem;
  cursor: pointer;

  &:hover {
    background-color: ${({ theme }) => theme.colors.secondary};
  }
  &.small {
    width: inherit;
    display: inline;
  }

  &.primary {
    color: ${({theme}) => theme.colors.white};
    background-color: ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
    &:hover {
      background-color: ${({ theme }) => theme.colors.secondary};
      color: ${({theme}) => theme.colors.primary};
    }
  }

  &.thin {
    padding: 1px;
    display: block;
  }
`;