import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Text } from '@rebass/emotion';

export const PostalCodeForm = styled.form`
  padding: 25px 30px 30px;
  margin-top: 50px;
  background: #363636;
  color: white;
`;

export const Copy = styled(Text)<any>`
  font-size: 14px;
  line-height: 1.5;
`;

export const Error = styled.div`
  padding: 8px 15px;
  /* TODO Brad: Make these not hardcoded (entire file) */
  background: #ded7ce;
  color: #363636;
  font-size: 13px;
  margin-bottom: 1px;
`;

export const Input = css`
  border: none;
  border-radius: 0;
`;

export const InlineLink = css`
  color: #363636;
  text-decoration: underline !important;
`;

export const DeliveryDay = styled.div`
  padding: 15px 20px;
  margin: 50px 0 25px 0;
  background: #DED7CE;

  span {
    font-weight: bold;
  }
`;

export const Button = styled.button`
  background: #DED7CE;
  -webkit-appearance: none;
  outline: none;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  width: 60px;

  path {
    fill: #363636
  }
`;