import styled from "@emotion/styled";
import {
  DARK_PRIMARY_ONE,
  DARK_PRIMARY_TWO,
  DARK_SECONDARY_ONE,
  DARK_SECONDARY_THREE,
  DARK_TERTIARY_TWO,
} from "../../shared/colors";

const Input = styled.input`
  -webkit-appearance: none;
  border: 1px solid ${DARK_PRIMARY_TWO};
  background-image: none;
  background-color: ${DARK_PRIMARY_ONE};
  border-radius: 4px;
  color: ${DARK_SECONDARY_THREE};
  border: 1px solid ${DARK_TERTIARY_TWO}";
  :focus {
    border: 1px solid ${DARK_TERTIARY_TWO};
    outline: none;
  }
  ::placeholder {
    color: ${DARK_SECONDARY_ONE};
  }
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  font-size: 14px;
`;

export default Input;