module Design.View.Header
  ( design
  ) where

import           Data.Monoid  ((<>))

import           Clay

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

desktopLineHeight :: Double
desktopLineHeight = 80

tabletLineHeight :: Double
tabletLineHeight = 60

mobileLineHeight :: Double
mobileLineHeight = 40

design :: Css
design = do
  display flex
  "flex-wrap" -: "wrap"
  position relative
  backgroundColor Color.chestnutRose
  color Color.white

  Media.desktop $ do
    minHeight (px desktopLineHeight)
    lineHeight (px desktopLineHeight)
    marginBottom (em 3)
  Media.tablet $ do
    minHeight (px (tabletLineHeight * 2))
    lineHeight (px tabletLineHeight)
    marginBottom (em 2)
  Media.mobile $ do
    minHeight (px (mobileLineHeight * 2))
    lineHeight (px mobileLineHeight)
    marginBottom (em 1.5)

  ".title" <> ".item" ? do
      Media.tabletDesktop $ sym2 padding (px 0) (px 20)
      Media.mobile $ sym2 padding (px 0) (px 10)

  ".title" ? do
    textAlign (alignSide sideLeft)

    Media.desktop $ do
      fontSize (px 35)
      display inlineBlock
    Media.tablet $ do
      fontSize (px 28)
      display inlineBlock
      width (pct 100)
    Media.mobile $ do
      fontSize (px 22)
      width (pct 100)

  ".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
    position absolute
    top (px 0)
    right (px 0)

    Media.desktop $ height (px desktopLineHeight)
    Media.tablet $ height (px tabletLineHeight)
    Media.mobile $ height (px mobileLineHeight)

    ".name" ? do
      Media.mobile $ display none
      Media.tabletDesktop $ sym2 padding (px 0) (px 20)

    ".signOut" ? do
      display flex
      justifyContent center
      alignItems center
      svg ? do
        Media.tabletDesktop $ width (px 30)
        Media.mobile $ width (px 20)
        "path" ? ("fill" -: "white")