import styled from 'styled-components';

type InputFieldGroupWrapperProps = {
  width?: number;
  fullWidth?: boolean;
};

export const InputFieldGroupWrapper = styled.div<InputFieldGroupWrapperProps>`
  display: flex;
  flex-direction: column;
  width: ${({ width, fullWidth }) =>
    fullWidth ? '100%' : width ? `${width}px` : '400px'};

  > div {
    width: 100%;
  }

  input,
  textarea {
    margin: 0;
    border-radius: 0;
    margin-top: -1px;
  }

  .input-group-first-item input,
  textarea {
    margin-top: 0;
    border-radius: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .input-group-last-item input,
  textarea {
    margin-top: -1px;
    border-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .input-field-error {
    display: none;
  }
`;