import styled from 'styled-components';
import { Box } from 'grommet/es6/components/Box';
import { backgroundStyle } from 'grommet/es6/utils';


var disabledStyle = '\n  opacity: 0.4;\n  cursor: default;\n';

export var StyledIcon = styled.span.withConfig({
  displayName: 'StyledTag__StyledIcon',
  componentId: 'sc-1cveylf-0'
})(['display:inline-block;> *{vertical-align:bottom;}', ''], function (props) {
  return !props.diabled && 'cursor: pointer;';
});

export var StyledTag = styled(Box).withConfig({
  displayName: 'StyledTag',
  componentId: 'sc-1cveylf-1'
})(['', ' ', ' user-select:none;', ''], function (props) {
  return backgroundStyle(props.background || 'brand', props.theme);
}, function (props) {
  return props.onClick && 'cursor: pointer;';
}, function (props) {
  return props.disabled && disabledStyle;
});