import { css } from '@emotion/core';
import hexToRgba from 'hex-rgba';

import theme from 'utils/theme';

import typography from 'utils/typography';

const PlaceholderColor = hexToRgba(theme.colors.black, 50);

export const InputDefaults = css`
  padding: 12px 17px;
  color: ${theme.colors.black};
  font-family: ${typography.options.bodyFontFamily!.join()};
  width: 100%;
  background-color: ${theme.colors.white};

  &::-ms-clear {
    display: none;
  }
`;

export const FieldBorder = css`
  border: 1px solid ${theme.colors.black};
`;

export const FieldBorderBottom = css`
  border-bottom: 1px solid ${theme.colors.black};
`;

export const InputFocus = css``;

export const ErrorState = css`
  border-color: ${theme.colors.red} !important;
  color: ${theme.colors.red};

  &::-webkit-input-placeholder {
    color: ${theme.colors.red};
  }

  &:-ms-input-placeholder {
    color: ${theme.colors.red};
  }

  &::placeholder {
    color: ${theme.colors.red};
  }
`;

export const InputReset = css`
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  transition: border .2s ease,
              color .2s ease;

  &::-webkit-input-placeholder {
    color: ${PlaceholderColor};
    text-transform: capitalize;
  }

  &:-ms-input-placeholder {
    color: ${PlaceholderColor};
    text-transform: capitalize;
  }

  &::placeholder {
    color: ${PlaceholderColor};
    opacity: 1;
    text-transform: capitalize;
  }

  &:focus::-webkit-input-placeholder {
    color: ${PlaceholderColor};
  }

  &:focus:-ms-input-placeholder {
    color: ${PlaceholderColor};
  }

  &:focus::placeholder {
    color: ${PlaceholderColor};
  }

  &:focus {
    outline: none;
  }

  &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
    -webkit-text-fill-color: ${PlaceholderColor} !important;
    border-color: ${hexToRgba(theme.colors.textDark, 20)};
  }
`;