form
  $x : 8px
  @extend %clearfix

  .input-holder
    &.last
      margin-right: 0

    &.w8
      width: 8 * $x
    &.w9
      width: 9 * $x
    &.w11
      width: 11 * $x
    &.w14
      width: 14 * $x
    &.w15
      width: 15 * $x
    &.w24
      width: 24 * $x

    &.radio
      line-height: 32px
      .radio-placeholder
        +flex(flex-start, center)
        margin: 8px 0

      &.multiple-radio
        +flex(flex-start, center)
        +flex-rows
        >label
          width: 100%
        .radio-placeholder
          margin-right: 15px
    &.auto-generate
      input
        background: #f3f3f3

    &.error
      input
        border-color: red
      textarea
        border-color: red
      .description
        color: red

    .message
      float: none
    &.birthday
      display: none


  .message
    display: block
    margin-bottom: 10px
    width: 100%
    line-height: 17px
    font-size: 14px
    +semibold

    &.error
      color: #F00
  >.error
    line-height: 17px
    font-size: 14px
    +semibold
    color: #F00

  .global-message
    display: block
    +grid-margin-s($bottom: .5)
    +grid-padding-s(.5,.5,.5,.5)
    width: 100%
    border: 1px solid red
    color: red
    line-height: 17px
    font-size: 14px
    +semibold

  label:not(.radio-label)
    display: block
    line-height: 17px
    font-size: 14px
    +bold
    color: $mobileBlack
    &:first-letter
      text-transform: uppercase

  .radio-label
    margin-right: $x
    line-height: 17px
    font-size: 14px
    +regular
    color: $mobileBlack

  input[type="radio"]
    margin-right: 4px

  input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="tel"], select
    padding: 0 $x
    width: 100%
    height: 32px
    border: 1px solid #d6cfc9
    border-radius: 4px
    line-height: 18px
    font-size: 15px
    +regular
    color: $mobileBlack
    &:focus
      outline: none
      border-color: #9ecaed
      box-shadow: 0 0 10px #9ecaed
    +placeholder
      color: $light-grey

  .select-row
    position: relative

    //&:after
    //  content: '›'
    //  +semibold
    //  color: $mobileBlack
    //  font-size: 24px
    //  line-height: 24px
    //  position: absolute
    //  right: 0
    //  bottom: 0
    //  width: 30px
    //  height: 30px
    //  +transform(rotate(90deg))
    //  pointer-events: none
    //  +flex(center,center)
  textarea
    padding: $x
    width: 100%
    height: 90px
    border: 1px solid #d6cfc9
    border-radius: 4px
    resize: none
    line-height: 18px
    font-size: 15px
    +regular
    color: $mobileBlack
    &:focus
      outline: none
      border-color: #9ecaed
      box-shadow: 0 0 10px #9ecaed

  .hidden-box
    position: relative
    overflow: hidden
    max-height: 0
    background-color: $mobileGray
    box-sizing: border-box
    +transition(max-height 600ms ease-out, padding 0.8s)

    &.open
      max-height: 600px
      padding: 16px 0
p.error
  color: red