.ae-text-field
  @include input

input[type="date"]
  -webkit-appearance: none
  -moz-appearance: none
  -webkit-text-size-adjust: none

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill
  -webkit-box-shadow: 0 0 0 100px #fff inset !important
  background-color: #fff !important
  -webkit-animation-name: autofill

.ae-form-field

  .fa
    @include font-size(28px, 28px)

    @include desktop
      font-size: 22px

  input[type="range"]
    @include box-shadow(0, 0, 0, 0)

  .ae-textarea
    @include input

  select
    @include input

  .ae-radio-field, .ae-checkbox-field
    @include box-shadow(0, 0, 0, 0)
    border: 0
    clip: rect(0 0 0 0)
    height: 20px
    margin: -1px
    overflow: hidden
    padding: 0
    position: absolute
    width: 1px

    & ~ label:before
      font-family: FontAwesome
      display: inline-block
      color: $body-color
      width: 20px

    &:checked ~ label:before
      color: $body-color

    &:checked ~ label
      color: $body-color

  .ae-radio-field
    & ~ label:before
      content: "\f10c"

    &:checked ~ label:before
      content: "\f192"

  .ae-checkbox-field
    & ~ label:before
      content: "\f096"
      font-size: 15px
      top: 1px
      position: relative

    &:checked ~ label:before
      content: "\f14a"
      top: 0px
      position: relative
      font-size: 15px

.ae-input-sm
  @include font-size(16px, 16px)
  padding: rem(5px)

  @include desktop
    padding: rem(6px)

.ae-input-md
  @include font-size(18px, 18px)
  padding: rem(14px)

  @include desktop
    padding: rem(12px)

.ae-input-lg
  @include font-size(20px, 20px)
  padding: rem(20px)

  @include desktop
    padding: rem(18px)

label, .ae-label
  line-height: 1.4
  @include p
  padding-right: 0.5em

.ae-actions
  margin: 20px 0

  @include tablet-max
    text-align: center

    .ae-btn
      width: 100%
      display: block

.ae-hint
  margin: 0 0 20px 0
  padding: 0
  color: $body-lighter

.ae-switch
  position: relative
  width: 50px
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  margin-right: 1em

  &-checkbox
    display: none

  &-label
    border: 1px solid $border-light
    @include border-radius(20px)
    cursor: pointer
    display: block
    padding: 0 !important
    overflow: hidden
    position: relative
    width: 100%

  &-inner
    display: block
    margin-left: -100%
    transition: margin 0.3s ease-in 0s
    width: 200%

    &:before, &:after
      box-sizing: border-box
      display: block
      float: left
      height: 30px
      line-height: 30px
      padding: 0
      width: 50%
    &:before
      background-color: $primary-color
      content: ""
      padding-left: 10px
    &:after
      background-color: $body-lighter
      content: ""
      padding-right: 10px

  &-button
    background: #FFFFFF
    border: 1px solid $border-dark
    @include border-radius(20px)
    bottom: 0
    display: block
    margin: 5px
    position: absolute
    right: 20px
    top: 0
    transition: all 0.3s ease-in 0s
    width: 20px

  &-checkbox:checked + &-label &-inner
    margin-left: 0

  &-checkbox:checked + &-label &-button
    right: 0

  & + label
    line-height: 2

.ae-input-success
  .fa, .ae-text-field
    color: $success !important

.ae-input-error
  .fa, .ae-text-field
    color: $cancelled !important

.ae-required
  label:first-child, .ae-label:first-child
    position: relative
    &:after
      content: " *"
      color: $cancelled
      right: 0
      position: absolute
      top: 0
      @include font-size(26px, 26px)