import { styled } from 'view-container'

const PaymentAddCardHeader = styled.div`
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  padding: 16px 8px;
`

const PaymentAddCardHeadingSection = styled.div`
  position: relative;
  flex: 1;
`

const PaymentAddCardButtonSection = styled.div`
  position: relative;
  flex: 0 0 160px;
  display: flex;
  justify-content: flex-end;

  @media (max-width: 767px) {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
  }
`

const PaymentAddCardWrapper = styled.section`
  position: relative;
`

export {
  PaymentAddCardHeader,
  PaymentAddCardHeadingSection,
  PaymentAddCardButtonSection,
  PaymentAddCardWrapper,
}