{-# 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.dustyGray
      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.silver
    hover & do
      input ? borderColor Color.silver
      label ? backgroundColor Color.silver

  ".name" ? minWidth (px 150)

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

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

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

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

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

  button # ".add" ? do
    defaultButton Color.chestnutRose 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.chestnutRose
    label ? backgroundColor Color.chestnutRose
    "input:focus + label" ? backgroundColor Color.chestnutRose

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