module Design.Form
  ( design
  ) where

import           Data.Monoid  ((<>))

import           Clay

import           Design.Color as Color

design :: Css
design = do

  let inputHeight = 30
  let inputTop = 22
  let inputPaddingBottom = 3

  label ? do
    cursor pointer
    color Color.silver

  ".textInput" ? do
    position relative
    marginBottom (em 2)
    paddingTop (px inputTop)
    marginTop (px (-10))

    input ? do
      width (pct 100)
      position relative
      backgroundColor transparent
      paddingBottom (px inputPaddingBottom)
      paddingRight (px 14) -- Space for the delete icon
      borderStyle none
      borderBottom solid (px 1) Color.dustyGray
      marginBottom (px 5)
      height (px inputHeight)
      lineHeight (px inputHeight)
      focus & do
        borderWidth (px 2)
        paddingBottom (px $ inputPaddingBottom - 1)

    label ? do
      lineHeight (px inputHeight)
      position absolute
      top (px inputTop)
      left (px 0)
      transition "all" (sec 0.2) easeInOut (sec 0)

    button ? do
      position absolute
      right (px 0)
      top (px 27)
      svg ? "path" ?
        ("fill" -: Color.toString Color.silver)
      hover & svg ? "path" ?
        ("fill" -: Color.toString (Color.silver -. 25))

    (input # ".filled" |+ label) <> (input # focus |+ label) ? do
      top (px 0)
      fontSize (pct 80)

    ".error" & do
      input ? do
        borderBottomColor Color.chestnutRose

      ".errorMessage" ? do
        position absolute
        color Color.chestnutRose
        fontSize (pct 80)

  ".colorInput" ? do
    display flex
    alignItems center
    marginBottom (em 1.5)

    input ? do
      borderColor transparent
      backgroundColor transparent

  ".selectInput" ? do
    marginBottom (em 2)

    label ? do
      display block
      marginBottom (px 10)
      fontSize (pct 80)

    select ? do
      width (pct 100)
      backgroundColor Color.white
      border solid (px 1) Color.silver
      sym borderRadius (px 3)
      sym2 padding (px 5) (px 8)
      option ? sym2 padding (px 5) (px 8)
      focus & backgroundColor Color.wildSand

    ".error" & do
      select ? borderColor Color.chestnutRose
      ".errorMessage" ? do
        color Color.chestnutRose
        fontSize (pct 80)
        marginTop (em 0.5)