import styled, { css } from 'styled-components';
import { Size } from '../../Input/utils';

export const InputContainer = styled.div<{
  themePaddingLeft: Size | 'none';
}>`
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  position: relative;
  overflow: hidden;
  margin: 0;

  ${({ themePaddingLeft, theme }) => {
    switch (themePaddingLeft) {
      case 'small':
        return css`
          padding: 0 0 0 ${theme.space.input.smallPadding};
        `;
      case 'medium':
        return css`
          padding: 0 0 0 ${theme.space.input.mediumPadding};
        `;
      case 'large':
        return css`
          padding: 0 0 0 ${theme.space.input.largePadding};
        `;
      case 'none':
        return css`
          padding: 0;
        `;
    }
  }};
`;

export const SelectedItemText = styled.div`
  position: absolute;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  color: ${({ theme }) => theme.colors.input.text};
`;

export const StyledHiddenInput = styled.input`
  position: fixed;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
`;