import styled from 'styled-components';
import * as React from 'react';

interface Props {
    blockHover?: boolean;
}

const StyledMenuItem = styled.div<Props>` 
    padding: 10px;
    cursor: default;

    > a {
        color: ${props => props.theme.colorPalette.primary.fontColor};
        text-decoration: none;
    }

    ${props => !props.blockHover && `
        &:hover{
            background: #80808030;
            cursor: pointer;
        }

        &:active {
            transform: scale(0.95);
        }

    `}
`;

export default StyledMenuItem;