import { styled } from 'styled-components';
import { Button } from '../../atoms/button/index.js';
import { Input } from '../../atoms/input/index.js';
import { Label } from '../../atoms/label/index.js';
import { Link } from '../../atoms/link/index.js';

/**
 * @component
 * @private
 */
const InputGroup = styled.div.withConfig({
  displayName: "input-group__InputGroup",
  componentId: "sc-ucet0j-0"
})(["position:relative;display:flex;width:100%;", "{flex-grow:1;}", ":not(:last-child){border-right:none;}", ",& > ", ",& > ", ":last-child{padding:", ";border:solid ", ";border-width:1px 1px 1px 0;border-top-left-radius:0;border-bottom-left-radius:0;margin:0;color:", ";}", ",", ",", "{flex-shrink:0;flex-grow:0;}", ",", "{line-height:", ";}", ":first-child,", ":first-child{border-right:0;}", ":hover{& + ", ",& + ", ",& + ", "{border-color:", ";}}", ":focus{& + ", ",& + ", ",& + ", "{border-color:", ";}}"], Input, Input, Label, Button, Link, ({
  theme
}) => theme.space.sm, ({
  theme
}) => theme.colors.inputBorder, ({
  theme
}) => theme.colors.grey40, Label, Button, Link, Label, Link, ({
  theme
}) => theme.lineHeights.lg, Button, Link, Input, Label, Button, Link, ({
  theme
}) => theme.colors.grey60, Input, Label, Button, Link, ({
  theme
}) => theme.colors.primary100);
export default InputGroup;