module Design.View.Payment.Add
  ( design
  ) where

import           Clay

import qualified Design.Color     as Color
import qualified Design.Constants as Constants
import qualified Design.Helper    as Helper

design :: Css
design = do
  ".addHeader" ? do
    backgroundColor Color.chestnutRose
    fontSize (px 18)
    color Color.white
    sym2 padding (px 20) (px 30)
    textAlign (alignSide sideCenter)
    borderRadius (px 5) (px 5) (px 0) (px 0)

  ".addContent" ? do
    sym2 padding (px 20) (px 30)

    ".buttons" ? do
      display flex
      justifyContent spaceAround
      marginTop (em 1.5)

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

      (".confirm" <> ".undo") ?
        width (px 90)