'use strict';

exports.__esModule = true;
exports.StyledTag = exports.StyledIcon = undefined;

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _grommet = require('grommet');

var _utils = require('grommet/utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

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