elements.tsx

import styled from '../../../styled-components'

export const ButtonElement = styled<
  {
    primary?: boolean
  },
  'button'
>('button')`
  border: 0;
  outline: 0;
  text-transform: uppercase;
  padding: ${({ theme }) => `${theme.padding.smaller} ${theme.padding.small}`};
  border-radius: ${({ theme }) => theme.borderRadius.normal};
  color: ${({ theme }) => theme.color.white};
  background-color: ${({ primary, theme }) =>
    primary ? theme.color.primary : theme.color.primary};
  cursor: pointer;
  :hover:enabled {
    background-color: ${({ primary, theme }) =>
      primary
        ? theme.color.fade(theme.color.primary, 0.1)
        : theme.color.fade(theme.color.primary, 0.1)};
  }
  :hover i {
    display: block;
  }
  :disabled {
    opacity: 0.5;
    cursor: default;
  }
`