import { styled } from 'styleh-components'
import { media, fontValue } from '@skava/styleh-toolset'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { Text } from '@skava/ui/dist/components/atoms/Text'

const StyledMaterialIcon = styled(MaterialIcon).attrs({
  'data-qa': 'qa-icon',
}) `
  width: rem(32);
  height: rem(32);
`

const StoreName = styled(Text).attrs({
  'data-qa': 'qa-text',
}) `
  font: ${fontValue(24, 'medium')};
  color: var(--color-black);
  text-transform: capitalize;
  padding-left: rem(10);
`

export { StoreName, StyledMaterialIcon }