module Design.Errors
  ( design
  ) where

import           Clay

import           Design.Color as Color

design :: Css
design = do
  position fixed
  top (px 20)
  left (pct 50)
  "transform" -: "translateX(-50%)"
  margin (px 0) (px 0) (px 0) (px 0)
  disapearKeyframes

  ".error" ? do
    disapearAnimation
    let errorColor = Color.chestnutRose -. 15
    color errorColor
    border solid (px 2) errorColor
    backgroundColor Color.white
    borderRadius (px 5) (px 5) (px 5) (px 5)
    padding (px 5) (px 5) (px 5) (px 5)

    before & display none

disapearAnimation :: Css
disapearAnimation = do
  animationName "disapear"
  animationDelay (sec 5)
  animationDuration (sec 1)
  animationFillMode forwards

disapearKeyframes :: Css
disapearKeyframes = keyframes
  "disapear"
  [ ( 10
    , do
        opacity 0
        height (px 40)
        lineHeight (px 40)
        marginBottom (px 10)
    )
  , ( 100
    , do
        opacity 0
        height (px 0)
        lineHeight (px 0)
        marginBottom (px 0)
    )
  ]