module Design.Modal
  ( design
  ) where

import           Clay
import           Data.Monoid              ((<>))

import qualified Design.View.Payment.Form as Form

design :: Css
design = do

  appearKeyframe

  ".g-Modal" ? do
    display none
    appearAnimation
    transition "all" (sec 0.2) ease (sec 0)
    opacity 0

  ".g-Modal--Show" & do
    display block
    opacity 1

  ".g-Modal--Hiding" & do
    display block

  ".g-Modal__Curtain" ? do
    position fixed
    top (px 0)
    left (px 0)
    width (pct 100)
    height (pct 100)
    backgroundColor (rgba 0 0 0 0.6)
    zIndex 1

  ".g-Modal__Content" ? do
    minWidth (px 300)
    position fixed
    top (pct 25)
    left (pct 50)
    "transform" -: "translate(-50%, -25%)"
    zIndex 1
    backgroundColor white
    sym borderRadius (px 5)
    boxShadow . pure . bsColor (rgba 0 0 0 0.5) $ shadowWithBlur (px 0) (px 0) (px 15)

    ".form" ? Form.design

  ".paymentModal" & do
    ".radioGroup" ? ".title" ? display none
    ".selectInput" ? do
      select ? width (pct 100)
      marginBottom (em 1)

  ".deletePaymentModal" <> ".deleteIncomeModal" ? do
    h1 ? marginBottom (em 1.5)

appearAnimation :: Css
appearAnimation = do
  animationName "appear"
  animationDuration (sec 0.15)
  animationTimingFunction easeIn

appearKeyframe :: Css
appearKeyframe = keyframes
  "appear"
  [ (0, "opacity" -: "0")
  ]