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

  .inline-form-title
    font-size: 1.2rem
    line-height: 1.2
    font-weight: regular()
    color: $grey

  .dual-wrapper
    +respond-to-width-beyond(450)
      +flex(space-between, flex-start)
      margin-bottom: 25px

      .form-element
        margin-bottom: 0
        width: calc((100% - 25px) / 2)

        &.absolute-label
          margin-bottom: 0


  .form-element
    position: relative
    margin-bottom: 25px

    &.is-hidden
      margin-bottom: 0

  .error-message
    display: block
    margin-top: 10px
    margin-bottom: 5px
    width: 100%
    color: $red
    font-size: 0.7rem
    font-weight: bold
    opacity: 1
    transition: opacity 0.4s

    &.fade-out
      opacity: 0

    &--bot
      margin-bottom: 25px

  label, .label
    display: block
    margin-bottom: 5px
    color: $grey
    font-size: 0.75rem
    line-height: 1.2

  input:not([type='submit']):not([type='checkbox']), textarea
    +appearance(none)
    display: block
    width: 100%
    background-color: white
    padding: 16px 20px

    border: 1px rgba($grey, 0.25) solid
    border-radius: 4px

    font-size: 0.7rem
    line-height: 1.2
    font-weight: medium()
    color: $black

    &.alert
      border-color: $red

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

    &:focus
      box-shadow: none
      outline: none

  textarea
    min-height: 152px
    resize: vertical

  .select
    .select-wrapper
      position: relative
      display: block

    .icon
      position: absolute
      right: 15px
      top: 24px
      display: inline-block
      width: 0
      height: 0
      border-style: solid
      border-width: 5px 6px 0 6px
      border-color: $grey transparent transparent transparent
      opacity: 0.3
      pointer-events: none

    select
      display: block
      width: 100%
      +appearance(none)
      font-family: poppins()
      background-color: white
      padding: 18px 35px 15px 20px
      border: 1px rgba($grey, 0.25) solid
      border-radius: 4px
      font-size: 0.7rem
      line-height: 1.2
      font-weight: medium()
      color: $black

      &:focus
        box-shadow: none
        outline: none

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

      input
        margin: 0 8px 0 0
        width: 16px
        height: 16px

      span
        margin: 0
        font-size: 0.7rem
        line-height: 1.2
        color: $grey

        a
          color: $blue
          text-decoration: none

          &:hover
            text-decoration: underline

  .submit
    margin-top: 20px

  .honey
    position: fixed
    top: -100px
    height: 20px
    width: 100%

  .postal-city-wrapper
    +respond-to-width-beyond(450)
      +flex(space-between, flex-start)

      .form-element

        &.postal, &.plus_one_postal
          width: 140px

        &.city, &.plus_one_city
          width: calc(100% - 160px)

  input[type='submit']
    +appearance(none)
    display: inline-block
    width: 240px
    padding: 15px 0
    border-radius: 4px
    border: none
    text-align: center
    cursor: pointer
    transition: background 0.3s

    &:focus
      box-shadow: none
      outline: none

  .form-element.absolute-label
    margin-bottom: 20px
    overflow: hidden

    &:after
      content: ''
      position: absolute
      left: 0
      bottom: 0
      width: 100%
      height: 3px
      background-color: transparent
      transition: background-color 0.3s

    input:not([type='submit']), textarea, select
      padding: 28px 20px 10px

    label
      margin-bottom: 0
      position: absolute
      top: 23px
      left: 20px
      transform: translate3d(0,0,0)
      transform-origin: 0 0
      transition: transform 0.3s, font-size 0.3s

    &.focused
      &:after
        background-color: rgba($blue, 0.3)

    &.filled, &.select
      label
        font-size: 0.65rem
        transform: translate3d(0,-13px,0)