module Design.View.Payment.HeaderForm
  ( design
  ) where

import           Clay

import qualified Design.Color     as Color
import qualified Design.Constants as Constants
import qualified Design.Helper    as Helper
import qualified Design.Media     as Media

design :: Css
design = do

  ".g-PaymentHeaderForm" ? do
    marginBottom (em 2)
    marginLeft (pct Constants.blockPercentMargin)
    marginRight (pct Constants.blockPercentMargin)
    display flex
    justifyContent spaceBetween
    alignItems center
    Media.mobile $ flexDirection column

    ".textInput" ? do
      display inlineBlock
      marginBottom (px 0)

      Media.tabletDesktop $ marginRight (px 30)
      Media.mobile $ do
        marginBottom (em 1)
        width (pct 100)

    ".selectInput" ? do
      Media.tabletDesktop $ display inlineBlock
      Media.mobile $ marginBottom (em 2)

    ".addPayment" ? do
      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
      Media.mobile $ width (pct 100)
      flexShrink 0