import { styled } from 'styleh-components'
import { FlexRow } from '../styled'
import { SquarePlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'

const StyledSquarePlaceholder = styled(SquarePlaceholder) `
  margin-right: rem(16);
`
const StoreDetails = styled(FlexRow).attrs({
  'data-qa': 'qa-store-header-wrapper',
} as {}) `
  margin-top: rem(24);
`

const ProductListWrapper = styled.div.attrs({
  'data-qa': 'qa-grouped-products-wrapper',
} as {}) ``

const ProductItemWrapper = styled.div `
  border-top: rem(1) solid #cccccc;
  border-bottom: rem(1) solid #cccccc;
  &:last-child {
    border-bottom: none;
  }
`

const StoreWrapper = styled.div.attrs({
  'data-qa': 'qa-store-container',
}) ``

export {
  ProductListWrapper,
  StyledSquarePlaceholder,
  StoreDetails,
  ProductItemWrapper,
  StoreWrapper,
}