import styled from 'styled-components' ; export const HighlightedToken = styled . span < { background ? : string ; } > `
    background-color: ${ ( { background : backgroundColor } ) => backgroundColor };
    padding: 1px 2px;
    margin: 1px 2px;
    display: inline-block;
    border-radius: ${ ( { theme } ) => theme . shape . borderRadius . default };
` ; export const RedToken = styled ( HighlightedToken ) `
    background-color: ${ ( { theme } ) => theme . color . R5 };
` ; export const GreenToken = styled ( HighlightedToken ) `
    background-color: ${ ( { theme } ) => theme . color . G5 };
` ; export const TransparentToken = styled ( HighlightedToken ) `
    background-color: 'transparent';
` ; export const BlankToken = styled ( HighlightedToken ) `
    background-color: transparent;
    color: transparent;
` ;