module Design.Global
  ( globalDesign
  ) where

import           Clay
import           Data.Text.Lazy   (Text)

import qualified Design.Color     as Color
import qualified Design.Constants as Constants
import qualified Design.Errors    as Errors
import qualified Design.Form      as Form
import qualified Design.Helper    as Helper
import qualified Design.Media     as Media
import qualified Design.Modal     as Modal
import qualified Design.Tooltip   as Tooltip
import qualified Design.Views     as Views

globalDesign :: Text
globalDesign = renderWith compact [] global

global :: Css
global = do
  ".errors" ? Errors.design
  ".modal" ? Modal.design
  ".tooltip" ? Tooltip.design
  Views.design
  Form.design

  body ? do
    minWidth (px 320)
    fontFamily ["Cantarell"] [sansSerif]
    ".modal" &
      overflowY hidden
    Media.tablet $ do
      fontSize (px 15)
      button ? fontSize (px 15)
      input ? fontSize (px 15)
    Media.mobile $ do
      fontSize (px 14)
      button ? fontSize (px 14)
      input ? fontSize (px 14)

  a ? cursor pointer

  input ? fontSize inherit

  h1 ? do
    color Color.chestnutRose
    marginBottom (em 1)
    lineHeight (em 1.2)

    Media.desktop $ fontSize (px 24)
    Media.tablet $ fontSize (px 22)
    Media.mobile $ fontSize (px 20)

  ul ? do
    "margin-bottom" -: "3vh"
    "margin-left" -: "1vh"
    li <? do
      "margin-bottom" -: "2vh"
      before & do
        content (stringContent "• ")
        color Color.chestnutRose
        "margin-right" -: "0.3vw"
      ul <? do
        "margin-left" -: "3vh"
        "margin-top" -: "2vh"

  ".dialog" ? ".content" ? button ? do
    ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
    ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten

  svg ? height (pct 100)

  button ? do
    ".content" ? display flex
    svg # ".loader" ? display none

    ".waiting" & do
      ".content" ? do
        display none
      svg # ".loader" ? do
        display block
        rotateKeyframes
        rotateAnimation

  select ? cursor pointer

rotateAnimation :: Css
rotateAnimation = do
  animationName "rotate"
  animationDuration (sec 1)
  animationTimingFunction easeOut
  animationIterationCount infinite

rotateKeyframes :: Css
rotateKeyframes = keyframes
  "rotate"
  [ (0, "transform" -: "rotate(0deg)")
  , (100, "transform" -: "rotate(360deg)")
  ]