import styled, { CSSObject } from "styled-components";

import { theme } from "data/dataMx";

interface IStylesProps {
  readOnly?: boolean;
  disabled?: boolean;
  hasError: boolean;
  styles?: CSSObject;
}

export const InputEmail = styled.input`
  ${({ styles }) => styles};
  outline: 0;
  padding: 10px 15px;
  border: 1px solid;
  border-color:${({ readOnly, disabled, hasError }: IStylesProps) =>
    disabled === true
      ? theme.neutral300
      : readOnly === true
      ? theme.transparent
      : hasError
      ? theme.secondary400
      : theme.neutral400};
  background-color:${({ readOnly, disabled }: IStylesProps) =>
    disabled === true
      ? theme.neutral300
      : readOnly === true
      ? theme.transparent
      : theme.neutral100};
  color:${({ disabled }: IStylesProps) =>
    disabled === true ? theme.neutral600 : theme.neutral700};
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  border-radius: 4px;

  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &:focus{
    border-color: ${({ readOnly }: IStylesProps) =>
      readOnly === true ? theme.transparent : theme.neutral700};
  }
  &:hover{
    ${({ readOnly }: IStylesProps) =>
      readOnly &&
      "border-radius: 0px; border-color:" +
        theme.neutral400 +
        "; borderWidth: 1px;  padding: 0; height: 24px; margin-top:12px;"}
  }
  &::placeholder{
    color: ${theme.neutral500};
    font-weight: 400;
  }
`;
