{-# LANGUAGE OverloadedStrings #-}

module Design.Header
  ( design
  ) where

import Data.Monoid ((<>))

import Clay

import Design.Constants
import Design.Color as Color
import qualified Design.Media as Media

design :: Css
design = do
  let headerPadding = "padding" -: "0 20px"
  display flex
  "flex-wrap" -: "wrap"
  lineHeightMedia
  marginBottom blockMarginBottom
  position relative
  backgroundColor Color.chestnutRose
  color Color.white

  ".title" <> ".item" ? headerPadding

  ".title" ? do
    height (pct 100)
    textAlign (alignSide sideLeft)

    Media.mobile $ fontSize (px 22)
    Media.mobileTablet $ width (pct 100)
    Media.tabletDesktop $ do
      display inlineBlock
      fontSize (px 35)

  ".item" ? do
    display inlineBlock
    transition "background-color" (ms 50) easeIn (sec 0)
    ".current" & backgroundColor (Color.chestnutRose -. 20)
    Media.mobile $ fontSize (px 13)

  (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.chestnutRose +. 10)
  (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.chestnutRose -. 10)

  ".nameSignOut" ? do
    display flex
    heightMedia
    position absolute
    top (px 0)
    right (px 0)

    ".name" ? do
      Media.mobile $ display none
      Media.tabletDesktop $ headerPadding

    ".signOut" ? do
      heightMedia
      color Color.white

      Media.mobile $ fontSize (px 20)
      Media.tabletDesktop $ fontSize iconFontSize

lineHeightMedia :: Css
lineHeightMedia = do
  Media.mobile $ lineHeight (px 50)
  Media.tabletDesktop $ lineHeight (px 80)

heightMedia :: Css
heightMedia = do
  Media.mobile $ height (px 50)
  Media.tabletDesktop $ height (px 80)