'use strict';

exports.__esModule = true;
exports.StyledWidgetsContainer = exports.StyledDropInputContainer = exports.StyledDropInput = 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 StyledDropInput = exports.StyledDropInput = (0, _styledComponents2.default)(_grommet.TextInput).withConfig({
  displayName: 'StyledDropInput',
  componentId: 'mqzg2z-0'
})(['padding-right:', 'px;'], function (props) {
  var widgetsBox = props.numWidgets * (24 + 2 * (0, _utils.parseMetricToNum)(props.theme.global.edgeSize.small));

  // eslint-disable-next-line no-mixed-operators
  return widgetsBox + (0, _utils.parseMetricToNum)(props.theme.global.spacing) / 2 - (0, _utils.parseMetricToNum)(props.theme.global.control.border.width);
});

var StyledDropInputContainer = exports.StyledDropInputContainer = _styledComponents2.default.div.withConfig({
  displayName: 'StyledDropInput__StyledDropInputContainer',
  componentId: 'mqzg2z-1'
})(['position:relative;width:100%;cursor:pointer;']);

var StyledWidgetsContainer = exports.StyledWidgetsContainer = (0, _styledComponents2.default)(_grommet.Box).withConfig({
  displayName: 'StyledDropInput__StyledWidgetsContainer',
  componentId: 'mqzg2z-2'
})(['position:absolute;right:0;top:', ';bottom:0;'], function (props) {
  return (0, _utils.parseMetricToNum)(props.theme.global.edgeSize.small) / 2 + 'px';
});