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

import { theme } from "data/dataMx";

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

export const InputContainer = styled.div`
  position: relative;
  width: 100%;
`;

export const InputPassword = styled.input`
  ${({ styles }) => styles};
  outline: 0;
  padding: 10px 45px 10px 15px;
  border: 1px solid;
  border: 1px solid ${theme.neutral400};
  border-color:${({ disabled, hasError }: IStylesProps) =>
    disabled === true
      ? theme.neutral300
      : hasError
      ? theme.secondary400
      : theme.neutral400};
  background-color:${({ disabled }: IStylesProps) =>
    disabled === true ? theme.neutral300 : theme.neutral100};
  color:${({ disabled }: IStylesProps) =>
    disabled === true ? theme.neutral600 : theme.neutral700};
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &:focus{
    border-color: ${theme.neutral400};
  }
  &::placeholder{
    color: ${theme.neutral500};
    font-weight: 400;
  }
`;

export const ShowPassword = styled.div`
  position: absolute;
  right: 0;
  top:0;
  cursor: pointer;
  background-color: transparent;
  margin-right: 15px;
  margin-top: 10px;
`;

export const HelperTextContainer = styled.div`
  margin-top: 4px;
`;
