module Design.Modal
  ( design
  ) where

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

import qualified Design.View.Payment.Add    as Add
import qualified Design.View.Payment.Delete as Delete

design :: Css
design = do

  ".modalCurtain" ? do
    position fixed
    top (px 0)
    left (px 0)
    width (pct 100)
    height (pct 100)
    backgroundColor (rgba 0 0 0 0.7)
    zIndex 1000
    opacity 1
    transition "all" (sec 0.2) ease (sec 0)

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

    ".add" ? Add.design
    ".delete" ? Delete.design

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

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