import { styled } from 'styleh-components'
import { LabelElement } from 'atoms/Text/Label'

// adding margin so extending the style of separator icon
const SeparatorElement = styled.span`
  margin: 0 16px;
`

const CopyrightSection = styled.section.attrs({
  className: 'copyright-panel',
})`
  display: flex;
  flex: 1;
  align-items: center;
`
const LogoText = LabelElement.as('span')

const Logo = styled(LogoText).attrs({
  'data-qa': 'qa-copyright',
  className: 'copyright-logo',
})`
  text-transform: uppercase;
`

const RightsText = LabelElement.as('span')

const Text = styled(RightsText).attrs({
  'data-qa': 'qa-rights',
  className: 'copyright-text',
})`
  text-transform: uppercase;
`

export { CopyrightSection, Logo, Text, SeparatorElement }
export default CopyrightSection