import { styled } from 'styleh-components'
import { media } from '@skava/styleh-toolset'
import { TextPlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { FlexColumn, FlexRow } from '../styled'

const HeadingPlaceholder = styled(TextPlaceholder) `
  margin-bottom: rem(8);
`
const PlaceholderWrapper = styled.div `
  margin: rem(8) 0;
  display: flex;
  justify-content: space-between;
`
const SeparateWrapper = styled.div `
  display: flex;
  justify-content: space-between;
  margin: rem(4) 0;
`
const PaymentSummaryBox = styled(FlexColumn) `
  flex: 0 0 50%;
`
const PaymentSummaryWrapper = styled(FlexRow) `
  padding: rem(24) 0;
  border-top: 1px solid var(--color-light-grey);
  ${media.phoneOrSmaller `
    display: block;
    padding: rem(16) 0 rem(20) 0;
  `}
`

export {
  SeparateWrapper,
  HeadingPlaceholder,
  PlaceholderWrapper,
  PaymentSummaryBox,
  PaymentSummaryWrapper,
}