import styled, { css } from 'styled-components';

const baseStyles = css`
  border: 1.5px solid ${({ theme }) => theme.colors.black38};
  border-radius: 4px;
  padding: 7px 15px;
  outline: none;
  transition: border 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  font-size: 1.2rem;
  box-sizing: border-box;

  :disabled {
    color: ${({ theme }) => theme.colors.black56};
    cursor: not-allowed;
  }
`;

export const Input = styled('input')<{
  error?: boolean;
  shouldFitContainer?: boolean;
}>`
  ${baseStyles}
  width: ${(props) => (props.shouldFitContainer ? '100%' : 'auto')};

  ${(props) =>
    props.error
      ? css`
          border: 1.5px solid ${({ theme }) => theme.colors.error};
        `
      : css`
          :focus {
            border: 1.5px solid ${({ theme }) => theme.colors.primary};
          }
        `}
`;