import { styled } from 'styleh-components'
import MaterialIcon from '@skava/ui/dist/components/atoms/MaterialIcon'
import { Heading, Paragraph } from '@skava/ui/dist/components/atoms/Text'

const StyledPromoDescription = styled(Paragraph)`
  margin: rem(8) 0 0;
`

const StyledCloseIcon = styled(MaterialIcon)``

const StyledPromoHeading = styled(Heading)`
  margin: 0;
`

const HeadingWrapper = styled.div`
  display: flex;
  justify-content: space-between;
`

const ModalWrapper = styled.div`
  display: flex;
  flex-direction: column;
  padding: rem(8);
  z-index: 3;
  position: absolute;
  box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.5);
  top: rem(20);
  background-color: var(--color-pure-white);
`

const PromotionText = styled.span`
  cursor: pointer;
  font-size: rem(14);
  color: var(--color-dark-green);
`

const Wrapper = styled.div `
  display: flex;
  flex-direction: column;
  position: relative;
`

export {
  ModalWrapper,
  PromotionText,
  StyledCloseIcon,
  StyledPromoHeading,
  HeadingWrapper,
  StyledPromoDescription,
  Wrapper,
}