/*==========================================================================
  Default Form styling
  ========================================================================== */

.form
  padding-top: 40px
  padding-bottom: 40px
  width: 100%
  max-width: 560px
  font-size: 1rem
  line-height: 1.6

  .multiple-elements
    +flex(space-between, flex-start)
    >*
      width: calc(50% - 29px)

  .form-element, .mc-field-group
    position: relative
    margin-bottom: 30px
    .error-message
      display: none
      position: absolute
      right: 0
      top: 3px
      color: darkred
      font-size: 0.75rem
      &:before
        content: '* '
        font-weight: bold

      &.active
        display: inline-block

    &.multiple-elements
      +flex(space-between, flex-start)
      >*
        width: calc(50% - 20px)

    &.text-area
      margin-bottom: 0
      display: block
      label
        margin-top: 15px
    &.select-element
      position: relative
      span
        background-image: url('/img/down.png')
        width: 16px
        height: 16px
        background-size: contain
        display: inline-block
        position: absolute
        right: 10px
        top: 25px
        pointer-events: none
      select
        margin-top: 10px
        +appearance(none)
        outline: none
        height: 45px
        width: 100%
        font-size: 15px
        line-height: 16px
        font-weight: 500
        background-color: #f3f3f3
        color: $black
        padding: 0 30px 0 20px
        border: 1.5px transparent solid

      .selectric-wrapper
        margin-top: 10px
        width: 100%
        display: inline-block

      .selectric-items
        li
          padding-left: 20px
          padding-right: 20px
          font-size: 15px
          line-height: 16px
          font-weight: 500
      .selectric
        background-color: #f3f3f3
        .label
          padding: 0 20px 0 10px
          font-size: 15px
          line-height: 16px
          font-weight: 500
          color: $black
          +flex(flex-start, center)
    label
      width: 100%
      display: block
      color: $blue
      +metropolisSemiBold

    input, textarea
      height: 45px
      width: 100%
      background-color: transparent
      color: $blue
      border: none
      font-size: 1rem
      +metropolisLightItalic
      border-bottom: 2px $lightGray2 solid

      &.alert
        border-color: $softRed !important

      &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
        transition: 9999s background-color
        -webkit-text-fill-color: $blue
        transition-delay: 9999s

      +placeholder
        color: $blue
        opacity: 0.5

      &.mce_inline_error
        border-color: rgba(255, 0, 0, 0.15) !important

    textarea
      height: 152px
      padding-top: 15px
      padding-bottom: 10px
      resize: vertical
      margin-left: 0
      font-weight: 500
      display: block

    &.foundBy
      .error-message.active
        position: relative
        display: block
        margin-bottom: 15px

  .submit
    margin-top: 30px
    border: 1px solid $blue
    border-radius: 4px
    max-width: 225px
    cursor: pointer
    background-color: transparent
    transition: background-color 0.3s

    p
      +flex(space-between, center)
      font-size: 0.75rem
      line-height: 1
      +metropolisSemiBold
      color: $blue
      text-transform: uppercase
      padding: 20px 15px 16px
      margin: 0

      &:after
        content: ''
        display: inline-block
        margin-left: 25px
        +arrowBlue
        +translate3d(0,0,0)
        transition: transform 0.3s

    &:hover
      background-color: rgba($darkBlue, 0.1)
      p
        &:after
          +translate3d(5px,0,0)


    input
      display: none
      border: 1.5px transparent solid
      font-size: 15px
      line-height: 15px
      width: 100%
      max-width: 300px
      background: $blue
      color: white
      padding: 15px 0
      cursor: pointer

      &:hover
        background: darken($blue, 5%)

  input:focus, textarea:focus
    box-shadow: none
    outline: none
    +placeholder
      +translate3d(20px,0,0)
      opacity: 0

  // Mailchimp overrulings
  #mc_embed_signup div.mce_inline_error
    margin: 10px 0 0
    +metropolisSemiBold
    font-size: 0.7rem
    background-color: rgba(255, 0, 0, 0.15) !important
    color: $blue
    border-radius: 6px

+respond-to-width(800px)
  .form
    .form-element
      margin-bottom: 30px
      &.text-area
        display: block
      &.select-element
        display: block
        select
          width: 100%
        .selectric-wrapper
          width: 100%
          display: block
      label
        display: block
        width: 100%
        padding-left: 20px
      input, textarea
        width: 100%
        margin-left: 0