.gl.field
.gl.form .field
  $background = #fff
  $box-shadow = $field-box-shadow

  > input
    background $background
    border none
    border-radius 0
    box-shadow $box-shadow
    line-height normal
    padding .8em 1em
    transition box-shadow $transition-duration

    &:not([type='checkbox']):not([type='radio'])
      -webkit-appearance none

    +placeholder()
      color $color-grey

    &:focus
      border-color $color-primary-lighter
      outline none

  &.fluid
  /.gl.fluid.form .field

    > input
      width 100%

  &.iconed
    align-items center
    background $background
    box-shadow $box-shadow
    display inline-flex

    > .icon + input
      padding-left 0

    > .icon
      flex-shrink 0
      font-size .9em
      margin-left ($indent / 4)
      margin-right @margin-left

    > input
      box-shadow none
      background transparent

  &.short

    > input
      max-width 5em
      width 100%

  &.medium
    max-width 10em

    > input
      width 100%

  &.long
    max-width 15em

    > input
      width 100%

  &.clean

    > input
      background transparent
      box-shadow inset 0 -1px $color-grey-lighter
      padding .6em .8em

    &.iconed
      background transparent
      box-shadow inset 0 -1px $color-grey-lighter

      > input
        box-shadow none

  &.large
    font-size 1.2em

  &.big
    font-size 1.5em

.gl.form .field

  + *
    margin-top ($indent / 2)

  + .actions
    margin-top $indent

    + *
      margin-top ($indent / 2)

    &.fluid
    /.gl.fluid.form .actions

      > *
        width 100%