import { styled } from '@skava/modules/___dist/view-container'
import { TextPlaceholder } from 'atoms/Placeholder'

const PaymentEditCardWrapper = styled.div``
const PaymentCardIcon = styled.div`
  width: 76px;
  height: 48px;
`
const DefaultPaymentOption = styled.div`
  margin-top: 25px;
  flex: 1
  svg:first-child {
    margin-right: 15px;
  }
`
const PaymentDetailsWrapper = styled.div`
  display: flex;
  flex: 0 0 40%;
  @media (max-width: 767px) {
    flex-direction: column
    flex: 0 0 40%
  }
`
const PaymentCardDetail = styled.div`
  margin-left: 8px;
  @media (max-width: 767px) {
    margin-left: 0px;
    margin-top: 15px;
  }
`
const PaymentEditHeader = styled.div`
  display: flex;
`
const PaymentEditButton = styled.div`
  display: flex;
  flex: 0 0 180px;
  justify-content: baseline;
`
const PaymentEditFooter = styled.div`
  display: flex;
`
const PaymentRemoveButton = styled.div`
  display: flex;
  flex: 0 0 162px;
  justify-content: flex-end
  margin-top: 15px;
`

export {
  PaymentEditCardWrapper,
  PaymentCardIcon,
  DefaultPaymentOption,
  PaymentDetailsWrapper,
  PaymentCardDetail,
  PaymentEditHeader,
  PaymentEditButton,
  PaymentEditFooter,
  PaymentRemoveButton,
}