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


export var StyledDropInput = styled(TextInput).withConfig({
  displayName: 'StyledDropInput',
  componentId: 'mqzg2z-0'
})(['padding-right:', 'px;'], function (props) {
  var widgetsBox = props.numWidgets * (24 + 2 * parseMetricToNum(props.theme.global.edgeSize.small));

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

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

export var StyledWidgetsContainer = styled(Box).withConfig({
  displayName: 'StyledDropInput__StyledWidgetsContainer',
  componentId: 'mqzg2z-2'
})(['position:absolute;right:0;top:0;bottom:0;']);