import styled, { StyledComponent } from '@emotion/styled';
import { Flex, Box } from '@rebass/emotion';

import { breakpoints, space, fontSizes, lineHeights, colors } from 'utils/theme';

import { InputDefaults, InputReset, FieldBorder, InputFocus } from 'components/fields/fields.styles';

export const Form: StyledComponent<any, any, any> = styled.form``;

export const Legend: StyledComponent<any, any, any> = styled.legend`
  margin-left: ${space.xxsmall}px;
`;

export const Group: StyledComponent<any, any, any> = styled(Flex)`
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -${space.xxsmall}px ${space.xlarge}px -${space.xxsmall}px;
`;

export const FormHeader = styled.h3`
  margin-bottom: ${space.xsmall};
  font-size: ${fontSizes.large};
  line-height: ${lineHeights.large};

  @media (min-width: ${breakpoints.small}) {
    font-size: ${fontSizes.xLarge};
    line-height: ${lineHeights.xxLarge};
  }
`;

export const FormError = styled(Box)`
  padding: 8px 25px;
  background: ${colors.failedRed};
  font-size: ${fontSizes.xSmall};
  color: white;
`;

export const StripeCheckoutWrapper = styled.div`
  .StripeElement {
    ${InputDefaults};
    ${InputReset};
    ${FieldBorder};
    ${InputFocus};
    padding: 20px 17px !important;
    font-size: 20px;

    ::placeholder {
      opacity: 1;
    }

    .InputElement {
      background: tomato;
    }
  }

  .ElementsApp input {
    font-size: 100px;
  }
`