import { styled } from 'styleh-components'

const ButtonRightSection = styled.div`
  position: relative;
  flex: 0 0 160px;
  padding: 0 4px;

  @media (max-width: 767px) {
    flex: 0 0 50%;
  }
`

const ButtonLeftSection = styled.div`
  position: relative;
  flex: 0 0 220px;
  padding: 0 4px;

  @media (max-width: 767px) {
    flex: 0 0 50%;
  }
`

const PaymentCardButtonSection = styled.div`
  position: relative;
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-left: -4px;
  margin-right: -4px;
`

const CardFormCheckBoxLabel = styled.div`
  position: relative;
  width: 250px;
  display: flex;
  align-items: center;
`

const CardFormCheckBox = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  width: 25px;
  height: 25px;
  margin-right: 16px;
`

const PaymentCardMethodCheckSection = styled.div`
  position: relative;
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  margin-bottom: 16px;
`

const PaymentCardDetailsSection = styled.div`
  position: relative;
  flex: 0 0 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 16px;

  @media (max-width: 1023px) {
    flex: 0 0 100%;
  }
`

const CardFormInput = styled.div`
  position: relative;
`

const CardFormLabel = styled.div`
  position: relative;
  margin-bottom: 6px;
`

const PaymentCardFormNameSection = styled.div`
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 16px;
`

const SecuritySection = styled.div`
  position: relative;
  width: 30%;

  @media (max-width: 1023px) {
    width: 30%;
  }

  @media (max-width: 767px) {
    width: 50%;
  }
`
const YearSection = styled.div`
  position: relative;
  width: 15%;

  @media (max-width: 1023px) {
    width: 10%;
  }

  @media (max-width: 767px) {
    width: 25%;
  }
`
const MonthSection = styled.div`
  position: relative;
  width: 15%;

  @media (max-width: 1023px) {
    width: 10%;
  }

  @media (max-width: 767px) {
    width: 25%;
  }
`
const CardNumberSection = styled.div`
  position: relative;
  width: 40%;

  @media (max-width: 1023px) {
    width: 100%;
  }
`

const RowItems = styled.div`
  position: relative;
  flex: 0 0 50%;
  padding: 0 4px;

  @media (max-width: 767px) {
    flex: 0 0 100%;
    margin-bottom: 16px;
  }
`

const Row = styled.div`
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -4px;
  margin-right: -4px;
`

const PaymentCardFormContainer = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
`

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

export {
  PaymentCardFormWrapper,
  PaymentCardFormContainer,
  Row,
  RowItems,
  CardNumberSection,
  MonthSection,
  YearSection,
  SecuritySection,
  PaymentCardFormNameSection,
  CardFormLabel,
  CardFormInput,
  PaymentCardDetailsSection,
  PaymentCardMethodCheckSection,
  CardFormCheckBox,
  CardFormCheckBoxLabel,
  PaymentCardButtonSection,
  ButtonLeftSection,
  ButtonRightSection,
}