.form
  display: block
  width: 100%
  font-size: 1rem
  line-height: 1.2

  .honey
    position: fixed
    top: -50px
    height: 20px
    width: 100%
  .honey-message, noscript
    display: block
    font-size: 0.75rem
    color: $red

  .form-element
    position: relative
    margin-bottom: 25px
    width: 50%
    padding-right: 30px
    padding-left: 0
    display: inline-block

    &:nth-child(2n)
      padding-right: 0
      padding-left: 30px

      +respond-to-width(960)
        padding-left: 0

    &.message
      width: 100%
      padding-right: 0
      margin-bottom: 0

  .error-message
    display: none
    width: 75%
    float: right
    text-align: right
    color: $red
    font-size: 0.75rem
    font-weight: bold

    &.active
      display: block

  label, .label
    display: block
    margin-bottom: 15px
    color: $blue-700
    font-size: 0.75rem
    font-weight: bold
    letter-spacing: 1px
    line-height: 1rem
    text-transform: uppercase

  input, textarea
    display: block
    width: 100%
    background-color: $neutral-300
    padding: 7px 20px

    border: none
    font-size: 0.75rem
    color: $blue-700

    +placeholder
      color: $blue-700

    &.alert
      border-color: $red

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

    &:focus
      box-shadow: none
      outline: none
      
  input
    height: 50px
    color: $blue-700

  textarea
    min-height: 240px
    resize: vertical
    padding: 20px
    overflow: auto

  .checkbox
    label
      +flex(space-between, flex-start)
      cursor: pointer

      input
        +appearance(none)
        margin: 0
        width: 20px
        height: 20px
        border-radius: 100%
        padding: 0
        border: none
        background-color: rgba(white, 0.3)
        background-size: contain
        background-position: center
        background-repeat: no-repeat
        transition: background-color 0.3s

        &:hover
          background-color: rgba(white, 0.5)

        &:checked
          background-image: url("/img/check/checked.svg")
          background-color: rgba(white, 0.7)

      span
        display: block
        margin: 2px 0 0
        width: calc(100% - 30px)

  .submit
    margin-top: 30px
    cursor: pointer
    input
      width: auto
      padding: 13px 20px
      margin-top: -10px

+respond-to-width(960)
  .form
    .form-element
      width: 100%
      padding-right: 0