// ============================================================
//          Form Layout                                  
// -----------------------------------------------------------

form
  +route(style,theme,child)
    ::-webkit-input-placeholder 
      color: $form-placeholder
    ::-moz-placeholder
      opacity: 1
      color: $form-placeholder
    :-ms-input-placeholder
      color: $form-placeholder
    input:-moz-placeholder 
      color: $form-placeholder
    .placeholder
      color: $form-placeholder
  +route(style,base)
    .colum
      label, .input-text, select
        width: 100%
        +inline-block

      select
        +border-radius(0)

      .input-text
        @if $activate-box-sizing == false
          +box-sizing(border-box)
        border-radius: 0
        -webkit-appearance: none

    label.colum, .input-text.colum
      width: 100%
  
  label
    +route(style,theme,child)
      color: nth($form-input-label,2)
    +route(style,base)
      +fontsize(nth($form-input-label,1))
      padding-bottom: nth($form-input-label,3) + 0px
      &.small
        +fontsize((nth($form-input-label,1)) - 2)

      &.inline
        // display: inline-block 
        vertical-align: top
        padding-top: 2px
        width: 90%

  +route(style,base)
    textarea
      resize: vertical
      &.no--resize
        resize: none

.input-select
  +route(style,theme,child)
    background-color: nth($form-input-style,1)
    color: nth($form-input-style,2)
  +route(style,base)  
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    cursor: pointer
    border: 0
    padding: 0
    vertical-align: middle
    +single-transition(all,500ms)
  &:focus
    +route(style,base)
      outline: none
    +route(style,theme,child)
      background-color: nth($form-input-style,3)
      color: nth($form-input-style,4)
      +box-shadow(inset 0 1px 4px rgba(0,0,0,0.1), inset 0 -1px 2px #fff)
  &:before
    +route(style,base)
      content: ''
      height: 20px
      width: 20px
      +absolute(0.1 0.1 0 0)
      z-index: 999
      +block
    +route(style,theme,child)
      background: red

+route(style,base)
  .input-outer
    display: block
    +relative
    span.error
      font-size: 12px

.input-outer_error
  +route(style,base)
    display: block
    +relative
  &:after
    +route(style,base)
      content: '!'
      +absolute(50% 10 0 0 )
      height: 20px
      line-height: 20px
      font-size: 20px
      margin-top: -10px
    +route(style,theme,child)  
      font-weight: 600
      color: rgba($c-alert,0.5)
  +route(style,theme,child)
    &:focus
      background-color: nth($form-input-style,1) 
      color: nth($form-input-style,4) 
      +box-shadow(inset 0 0 2px rgba($c-alert,0.9))
    .input-text
      +box-shadow(inset 0 0 2px $c-alert)
      background-color: rgba($c-alert,0.1)


.label-block
  +route(style,theme,child)
    color: nth($form-input-label-block,1)
    background-color: nth($form-input-label-block,2)
    +background-image(linear-gradient(top, rgba(#fff, 0.2) 0%, rgba(#000, 0.001) 800%))
  +route(style,base)
    +block
    @if $activate-box-sizing == false
      +box-sizing(border-box)
    @if $comp-ie7 == true
      .ie7 &
        padding-left: 0px !important
        padding-right: 0px !important

+route(style,base)
  .label-unblock
    +block
    @if $activate-box-sizing == false
      +box-sizing(border-box)
    @if $comp-ie7 == true
      .ie7 &
        padding-left: 0px !important
        padding-right: 0px !important

.input-border
  +route(style,theme,child)
    border-color: nth($form-input-border,2)
    border-style: solid
  +route(style,base)
    border-width: nth($form-input-border,1) nth($form-input-border,1) nth($form-input-border,1) nth($form-input-border,1)

.input-border_child
  +route(style,theme,child)
    @extend .input-border
  +route(style,base)
    border-width: nth($form-input-border,1) 0 nth($form-input-border,1) nth($form-input-border,1)
    @if nth($layout-fluid-behavior,2) != false

      &.input-bc_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          border-width: nth($form-input-border,1) nth($form-input-border,1) 0 nth($form-input-border,1)

      &.input-bc_s   
        @media (max-width: $bp-mobile  - 1px)
          border-width: nth($form-input-border,1) nth($form-input-border,1) 0 nth($form-input-border,1)

      &.input-bc-solo_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          border-width: nth($form-input-border,1) nth($form-input-border,1) nth($form-input-border,1) nth($form-input-border,1)

      &.input-bc-solo_s
        @media (max-width: $bp-mobile  - 1px)
          border-width: nth($form-input-border,1) nth($form-input-border,1) nth($form-input-border,1) nth($form-input-border,1)

+route(style,theme,child)
  .input-border_row
    +box-shadow(inset 0px 0px 1px rgba(0,0,0,0.3))

.input-text
  +route(style,theme,child)
    background-color: nth($form-input-style,1)
    color: nth($form-input-style,2)
  +route(style,base)
    border: 0
    padding: 0
    vertical-align: middle
    +single-transition(all,500ms)
    @if $comp-ie7 == true
      .ie7 &
        +relative(-1 0 0 0)
  +route(style,theme,child)
    &:focus
      background-color: nth($form-input-style,3)
      color: nth($form-input-style,4)
      outline: none
      +box-shadow(inset 0 1px 4px rgba(0,0,0,0.1), inset 0 -1px 2px #fff)

+route(style,base)
  .input_alpha
    +fontsize(nth($input-size-alpha,1))
    @if unitless(nth($input-size-alpha,2))
      padding-top: nth($input-size-alpha,2) + 0px
      padding-bottom: nth($input-size-alpha,2) + 0px
    @else
      +paddingtop(nth($input-size-alpha,2))
      +paddingbottom(nth($input-size-alpha,2))

    @if unitless(nth($input-size-alpha,3))
      padding-left: nth($input-size-alpha,3) + 0px
      padding-right: nth($input-size-alpha,3) + 0px
    @else
      +paddingleft(nth($input-size-alpha,3), $iecheck: false)
      +paddingright(nth($input-size-alpha,3), $iecheck: false)

    @if $comp-ie7 == true
      .ie7 &
        padding-left   : 0
        padding-right  : 0

  .input_bravo
    +fontsize(nth($input-size-bravo,1))
    @if unitless(nth($input-size-bravo,2))
      padding-top: nth($input-size-bravo,2) + 1px
      padding-bottom: nth($input-size-bravo,2) + 1px
    @else
      +paddingtop(nth($input-size-bravo,2) + 1)
      +paddingbottom(nth($input-size-bravo,2) + 1)

    @if unitless(nth($input-size-bravo,3))
      padding-left: nth($input-size-bravo,3) + 0px
      padding-right: nth($input-size-bravo,3) + 0px
    @else
      +paddingleft(nth($input-size-bravo,3), $iecheck: false)
      +paddingright(nth($input-size-bravo,3), $iecheck: false)

    @if $comp-ie7 == true
      .ie7 &
        padding-left   : 0
        padding-right  : 0

  .input_charlie
    +fontsize(nth($input-size-charlie,1))
    @if unitless(nth($input-size-charlie,2))
      padding-top: nth($input-size-charlie,2) + 1px
      padding-bottom: nth($input-size-charlie,2) + 1px
    @else
      +paddingtop(nth($input-size-charlie,2) + 1)
      +paddingbottom(nth($input-size-charlie,2) + 1)

    @if unitless(nth($input-size-charlie,3))
      padding-left: nth($input-size-charlie,3) + 0px
      padding-right: nth($input-size-charlie,3) + 0px
    @else
      +paddingleft(nth($input-size-charlie,3), $iecheck: false)
      +paddingright(nth($input-size-charlie,3), $iecheck: false)

    @if $comp-ie7 == true
      .ie7 &
        padding-left   : 0
        padding-right  : 0

  .input_delta
    +fontsize(nth($input-size-delta,1))
    @if unitless(nth($input-size-delta,2))
      padding-top: nth($input-size-delta,2) + 1px
      padding-bottom: nth($input-size-delta,2) + 1px
    @else
      +paddingtop(nth($input-size-delta,2) + 1)
      +paddingbottom(nth($input-size-delta,2) + 1)

    @if unitless(nth($input-size-delta,3))
      padding-left: nth($input-size-delta,3) + 0px
      padding-right: nth($input-size-delta,3) + 0px
    @else
      +paddingleft(nth($input-size-delta,3), $iecheck: false)
      +paddingright(nth($input-size-delta,3), $iecheck: false)

    @if $comp-ie7 == true
      .ie7 &
        padding-left   : 0
        padding-right  : 0

  .input_echo
    +fontsize(nth($input-size-echo,1))
    @if unitless(nth($input-size-echo,2))
      padding-top: nth($input-size-echo,2) + 1px
      padding-bottom: nth($input-size-echo,2) + 1px
    @else
      +paddingtop(nth($input-size-echo,2) + 1)
      +paddingbottom(nth($input-size-echo,2) + 1)

    @if unitless(nth($input-size-echo,3))
      padding-left: nth($input-size-echo,3) + 0px
      padding-right: nth($input-size-echo,3) + 0px
    @else
      +paddingleft(nth($input-size-echo,3), $iecheck: false)
      +paddingright(nth($input-size-echo,3), $iecheck: false)

    @if $comp-ie7 == true
      .ie7 &
        padding-left   : 0
        padding-right  : 0