@import variables

.full-width-forms
  .btn
    padding-left: 0.5em
    padding-right: 0.5em
  .btn,
  a,
  button,
  submit,
  select,
  textarea,
  input
    &:not([type='checkbox']):not([type='radio'])
      width: 100%

fieldset
  border-radius: $radius
  border: $border-width solid #f5f5f5
  margin: 1em 0
  legend
    font-weight: 400
    padding: 0 0.25em

input, select, textarea, button, .btn
  margin-bottom: 1px

input, select, textarea
  @include appearance(none)
  border-radius: $radius
  border: 1px solid $gray-lighter
  background-color: $input-background-color
  box-shadow: none
  color: $text
  display: block
  font-size: inherit
  outline: none
  padding: 0.49em $input-left-right-padding
  &:hover, &:focus
    border-color: $gray
    transition: $all
    background-color: $input-background-color-hover
  &:focus
    border-color: $gray

textarea
  padding: $input-left-right-padding

select
  @include svg-background
  background-image: url($icon-arrow-updown)
  line-height: 1.1
  padding: 0.78em $input-left-right-padding
  padding-right: 1.4em

input
  &:not(.btn):not([type='checkbox']):not([type='radio'])
    min-height: 2.7em

  &[type='file']
    background-color: $input-background-color
    width: 100%
    font-size: 12px
    padding: 1.02em $input-left-right-padding

  &[type='range']
    padding: 0.870em 0.1em
    &:focus
      outline: 0

  &[type='search']
    box-sizing: border-box !important
    @include appearance(none)

  &[type='checkbox'], &[type='radio']
    background-color: $input-background-color
    border: $border-width solid #888
    display: inline-block
    height: 1em
    margin: 0 0.3em -0.1em 0
    padding: 0
    position: relative
    top: 0
    width: 1em
    overflow: hidden
    &:checked
      background-color: $input-checkbox-checked
      border-color: $input-checkbox-checked
    &:disabled
      opacity: 0.3

  &[type='checkbox']
    border-radius: $radius
    &:checked
      @include svg-background
      background-image: url($icon-check-inverse)
      border: none

  &[type='radio']
    border-radius: $round
    &:checked
      &:before
        color: white
        content: ' '
        height: 1em
        overflow: hidden
        position: absolute
        text-align: center
        top: 0
        width: 1em

// Adjustments for iOS Safari

@media screen and (-webkit-min-device-pixel-ratio: 0)

  input:not(.btn):not([type='checkbox']):not([type='radio']), select, textarea
    min-height: $input-height

// Adjustments to Firefox

@-moz-document url-prefix()

  input
    &[type='file']
      padding: 1.0em $input-left-right-padding

  select
    padding: 0.6410em $input-left-right-padding
    &:-moz-focusring
      color: transparent
      text-shadow: 0 0 0 #000
      transition: none

// Adjustments for internet explorer 10+

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)

  select
    padding: 0.65em $input-left-right-padding
    padding-right: $input-left-right-padding

  input
    &[type='file']
      &::-ms-value
        background: $input-background-color
      &::-ms-value, &::-ms-value
        box-shadow: none
        border: 0
    &[type='range']
      border-color: transparent