Button.tsx

import styled from 'styled-components'
import { fonts } from 'style/fonts'
import { distance, maxScreenWidthMobile } from 'style/sizes'

const Button = styled.button.attrs({type: 'button'})`
    font-family: ${fonts.default};
    display: block;
    appearance: none;
    background: ${({theme}) => theme.colors.secondary};
    color: ${({theme}) => theme.colors.backgroundSecondary};
    border: none;
    margin-bottom: ${distance.large};
    text-transform: uppercase;
    padding: ${distance.small};
    border-radius: 4px;
    -webkit-appearance: none;
    opacity: ${({disabled}) => disabled ? 0.3 : 1};
    @media screen and (min-width: ${maxScreenWidthMobile}px) {
        &:hover {
            background: ${({theme}) => theme.colors.primary};
            transform: scale(1.05);
        }
    }
    &:active {
        opacity: 0.7;
    }
`

export default Button