import { styled } from 'styleh-components'
import {
  ToggleList,
  ToggleContentWrapper,
  ToggleItemWrapper,
} from '@skava/ui/dist/components/molecules/ToggleList'

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

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

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

export { StyledToggleList, StyledToggleContentWrapper }