{-# LANGUAGE OverloadedStrings #-}

module Design.LoggedIn.Home.Add
  ( design
  ) where

import Data.Monoid ((<>))

import Clay

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

design :: Css
design = 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 Color.mountainMist
      color Color.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 Color.pumice
    hover & do
      input ? borderColor Color.pumice
      label ? backgroundColor Color.pumice

  ".name" ? minWidth (px 150)

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

    (".punctual" <> ".monthly") ? do
      defaultButton Color.mercury Color.mountainMist (px $ inputHeight `Prelude.div` 2) focusLighten
      paddingLeft (px 15)
      paddingRight (px 15)
      ".selected" & do
        backgroundColor Color.blue
        color Color.white

    hover & (".punctual" <> ".monthly") ?
      ".selected" & backgroundColor (focusLighten Color.blue)

    focus & (".punctual" <> ".monthly") ?
      ".selected" & backgroundColor (focusLighten Color.blue)

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

  button # ".add" ? do
    defaultButton Color.red Color.white (px inputHeight) focusLighten
    paddingLeft (px 15)
    paddingRight (px 15)
    i ? marginLeft (px 10)
    ".waitingServer" & ("cursor" -: "not-allowed")

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

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