{-# LANGUAGE OverloadedStrings #-}

module Header
  ( style
  ) where

import           Data.Monoid  ((<>))

import           Clay         hiding (style)
import           Clay.Display (displayTable)

import qualified Color        as Color
import qualified Media        as Media

style :: Css
style = do

  ".Header__Container" ? do
    backgroundColor Color.red
    color Color.white
    fontSize (px 28)
    display flex

  ".Header__Link" ? do
    display flex
    justifyContent center
    alignItems center
    flexGrow 1
    flexBasis (px 0)
    height (em 3)
    lineHeight (em 3)
    textDecoration none
    padding (px 0) (px 0) (px 0) (px 0)
    textAlign (alignSide sideCenter)
    color Color.white
    textTransform capitalize
    transition "background-color" (ms 500) ease (sec 0)
    Media.tablet $ fontSize (em 0.8)
    Media.mobile $ fontSize (em 0.6)

  (".Header__Link" # hover <> ".Header__Link" # focus <> ".Header__LinkCurrent") ? do
    backgroundColor Color.red
    borderBottomStyle solid
    borderBottomColor (Color.red +. 40)
    Media.mobile $ borderBottomWidth (px 6)
    Media.tablet $ borderBottomWidth (px 8)
    Media.desktop $ borderBottomWidth (px 10)

  ".Header__Icon" ? do
    display flex
    height (px 40)
    marginRight (px 20)
    Media.mobile $ display none