import styled from 'styled-components/macro'

import { isMobileDevice } from 'config'

import { Footer as FooterBase } from 'features/BuyMatchPopup/styled'

export const ChooseSub = styled.div`
  font-weight: 700;
  font-size: ${isMobileDevice ? 16 : 24}px;
  margin: auto;
  color: ${({ theme }) => theme.colors.white};
`

type FooterProps = {
  hasCard?: boolean,
}

export const Footer = styled(FooterBase)<FooterProps>`
  flex-direction: column;
  align-items: center;
  margin-top: ${({ hasCard }) => (hasCard ? 20 : 40)}px;
`