/** @jsxImportSource @emotion/react */

import tw, { styled, theme } from 'twin.macro';

export const createTextFieldStyles = () => [
  tw`
  rounded-none
  appearance-none outline-none
  bg-white
  px-4
  py-4
  border-0 border-l border-indigo-900
  focus:(outline-none border-brand)`,
  {
    boxShadow: `inset 0 0 white`,
    transition: 'box-shadow 200ms, border-color 200ms',
    '&:focus': {
      boxShadow: `inset 0 0 0 1px ${theme`colors.brand`}`,
    },
  },
];
const TextField = styled.input(createTextFieldStyles);

export default TextField;