import { styled } from 'styleh-components'
import {
  ToggleList,
  ToggleContentWrapper,
  ToggleItemWrapper,
} from 'molecules/ToggleList'

const StyledToggleContentWrapper = styled
  .withComponent(ToggleContentWrapper)
  .attrs({
    'data-qa': 'qa-payment-container',
  })`
  display: flex;
  flex-direction: column;
`

const StyledToggleList = styled.withComponent(ToggleList)`
  ${ToggleItemWrapper} {
    margin: 0;
    padding: rem(16);

    @tablet-or-smaller() {
      padding: rem(8) 0;
    }
  }
`

export { StyledToggleList, StyledToggleContentWrapper }