import * as React from 'react';
import styled, { StyledComponentClass } from 'styled-components';
import { COLOR_PALETTE } from '../../../../constants/colors';

export const ListItem = styled.li`
    align-items: center;
    color: ${COLOR_PALETTE.GREY_DARK_1};
    cursor: pointer;
    display: flex;
    height: 27px;
    padding-left: 8px;
    width: 100%;
`;

export const ListItemNotFocused = ListItem.extend`
    background-color: ${COLOR_PALETTE.BLUE_LIGHT_4};
`;

export const ListItemFocused = ListItem.extend`
    background-color: ${COLOR_PALETTE.BLUE_LIGHT_2};
`;

export const HighlightedItemChunk = styled.span`
    font-weight: bold;
`;

export const RegularItemChunk = styled.span`
`;