import styled from 'styled-components';
import css from '@styled-system/css';
import { BoxBlock, TextBlock } from "../../../modules";
import { colors, AlignCenter, Wrap, BorderRadius } from "../../../globalStyled";
const style = `
  height: 38px;
  color: ${colors.black};
  width: 100%;
  font-size: 14px;
  line-height: 38px;
`;
function renderInput({ clearInput, required }) {
    if (clearInput) {
        return `
      ${style}
      padding: 0;
     
      &::placeholder {
        color: ${colors.grays.text};
      }
    `;
    }
    else {
        return `
      ${style}
      
      border: ${required ? `1px solid ${colors.error} !important` : `1px solid ${colors.grays.border}`};
      padding: 0 16px;
      ${BorderRadius.small}
      
      &::placeholder {
        color: ${colors.grays.text};
      }
       
      &:focus {
        outline: none;
        border-color: ${colors.black};
      }
    `;
    }
}
export const InputWrapperDiv = styled(BoxBlock) `
  width: 100%;
  ${AlignCenter}
  ${Wrap}

  input {
    ${({ clearInput, required }) => renderInput({ clearInput, required })}

    &[hidden] {
      opacity: 0;
      position: absolute;
      left: -99999999px;
    }
  }
`;
export const LabelText = styled(TextBlock) `
  flex: 0 0 100%;
  color: ${colors.grays.text};
  ${css({ mb: 2 })}
`;
