{-# LANGUAGE OverloadedStrings #-}

module Design.LoggedIn.Add
  ( addDesign
  ) where

import Data.Monoid ((<>))

import Clay

import Design.Color as C
import Design.Helper
import Design.Constants

addDesign :: Css
addDesign =

  form # ".addPayment" ? do
    centeredWithMargin
    marginBottom blockMarginBottom
    display flex
    "justify-content" -: "center"

    ".name" <> ".cost" ? do
      position relative
      display flex
      marginRight (pct blockPercentMargin)
      label ? do
        fontWeight bold
        display inlineBlock
        width (px 50)
        textAlign (alignSide sideCenter)
        backgroundColor C.darkGrey
        color C.white
        height (px inputHeight)
        lineHeight (px inputHeight)
        fontSize (px 22)
        verticalAlign middle
        cursor cursorText
        borderRadius (px 0) radius radius (px 0)
      input ? do
        defaultInput inputHeight
        borderRadius radius (px 0) (px 0) radius
        "width" -: "calc(100% - 40px)"
      "input:focus + label" ? backgroundColor C.grey

    ".name" ? minWidth (px 150)

    button # ".frequency" ? do
      fontSize (pct 90)
      marginRight (pct blockPercentMargin)

      (".punctual" <> ".monthly") ? do
        defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2)
        paddingLeft (px 15)
        paddingRight (px 15)
        ".selected" & do
          backgroundColor C.blue
          color C.white

      ".punctual" ? borderRadius radius radius 0 0
      ".monthly" ? borderRadius 0 0 radius radius

    button # ".add" ? do
      defaultButton C.red C.white (px inputHeight)
      paddingLeft (px 15)
      paddingRight (px 15)

    ".name.error" <> ".cost.error" ? do
      input ? borderColor C.redError
      label ? backgroundColor C.redError
      "input:focus + label" ? backgroundColor C.redError

    ".errorMessage" ? do
      position absolute
      color C.redError
      top (px (inputHeight + 10))
      left (px 0)