import styled from 'styled-components'
import theme from 'theme'
import brickBlockLogo from './assets/brickblock-logo.png'

export const HeaderWrapper = styled.div`
  background: ${theme.gradients['menu-blue']};
  height: 70px;
`

/* stylelint-disable order/properties-alphabetical-order */
export const HeaderLogoWrapper = styled.span`
  background: url('${brickBlockLogo}') no-repeat;
  display: none;
  ${theme.media.tablet`display: block;`};
  float: left;
  margin: 23px 12px 23px 24px;
  padding: 12px 70px;
`

export const HeaderButtonWrapper = styled.button`
  background: ${theme.gradients['dark-blue2']};
  border: none;
  cursor: pointer;
  height: 70px;
  padding-left: 20px;
  width: 74px;
`
/* stylelint-enable order/properties-alphabetical-order */
