@mixin input
  border: 1px solid $border-dark
  width: 100%
  @include border-radius(3px)
  @include box-shadow(inset, 2px, 2px, 2px, lighten($border-dark, 20%))
  outline: none
  @include easeInOut
  margin: 10px 0
  @include body-font
  vertical-align: top

  &:focus
    border: 1px solid $primary-color
    @include box-shadow(0, 0, 5px, 0, $primary-color)

.ae-text-field
  @include input

.ae-form-field

  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: $primary-color

    &:checked ~ label
      color: $primary-color

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

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

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

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

.ae-input-sm
  @include h6
  padding: rem(3px)

  @include desktop
    padding: rem(2px)

.ae-input-md
  @include h5
  padding: rem(6px)

  @include desktop
    padding: rem(5px)

.ae-input-lg
  @include h4
  padding: rem(12px)

  @include desktop
    padding: rem(7px)

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

  &-checkbox
    display: none
  &-label
    border: 1px solid $border-light
    border-radius: 20px
    cursor: pointer
    display: block
    overflow: hidden
  &-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
    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