module Design.View.ConfirmDialog
  ( 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
  ".confirm" ? do
    ".confirmHeader" ? do
      backgroundColor Color.chestnutRose
      fontSize (px 18)
      color Color.white
      sym padding (px 20)
      textAlign (alignSide sideCenter)
      borderRadius (px 5) (px 5) (px 0) (px 0)

    ".confirmContent" ? do
      sym padding (px 20)

      ".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)