$input-color ?= $grey-darker
$input-background-color ?= $white
$input-border-color ?= $grey-lighter
$input-shadow ?= inset 0 1px 2px rgba($black, 0.1)

$input-hover-color ?= $grey-darker
$input-hover-border-color ?= $grey-light

$input-focus-color ?= $grey-darker
$input-focus-border-color ?= $link
$input-focus-box-shadow-size ?= 0 0 0 0.125em
$input-focus-box-shadow-color ?= rgba($link, 0.25)

$input-disabled-color ?= $text-light
$input-disabled-background-color ?= $background
$input-disabled-border-color ?= $background

$input-arrow ?= $link

$input-icon-color ?= $grey-lighter
$input-icon-active-color ?= $grey

$input-radius ?= $radius

$file-border-color ?= $border
$file-radius ?= $radius

$file-cta-background-color ?= $white-ter
$file-cta-color ?= $grey-dark
$file-cta-hover-color ?= $grey-darker
$file-cta-active-color ?= $grey-darker

$file-name-border-color ?= $border
$file-name-border-style ?= solid
$file-name-border-width ?= 1px 1px 1px 0
$file-name-max-width ?= 16em

$label-color ?= $grey-darker
$label-weight ?= $weight-bold

$help-size ?= $size-small

input()
  control()
  background-color $input-background-color
  border-color $input-border-color
  color $input-color
  +placeholder()
    color rgba($input-color, 0.3)
  &:hover,
  &.is-hovered
    border-color $input-hover-border-color
  &:focus,
  &.is-focused,
  &:active,
  &.is-active
    border-color $input-focus-border-color
    box-shadow $input-focus-box-shadow-size $input-focus-box-shadow-color
  &[disabled]
    background-color $input-disabled-background-color
    border-color $input-disabled-border-color
    box-shadow none
    color $input-disabled-color
    +placeholder()
      color rgba($input-disabled-color, 0.3)

.input,
.textarea
  input()
  box-shadow $input-shadow
  max-width 100%
  width 100%
  &[type="search"]
    border-radius 290486px
  &[readonly]
    box-shadow none
  // Colors
  for $name, $pair in $colors
    $color = $pair['1']
    &.is-{$name}
      border-color $color
  // Sizes
  &.is-small
    control-small()
  &.is-medium
    control-medium()
  &.is-large
    control-large()
  // Modifiers
  &.is-fullwidth
    display block
    width 100%
  &.is-inline
    display inline
    width auto

.input
  &.is-static
    background-color transparent
    border-color transparent
    box-shadow none
    padding-left 0
    padding-right 0

.textarea
  display block
  max-width 100%
  min-width 100%
  padding 0.625em
  resize vertical
  &:not([rows])
    max-height 600px
    min-height 120px
  &[rows]
    height unset
  // Modifiers
  &.has-fixed-size
    resize none

.checkbox,
.radio
  cursor pointer
  display inline-block
  line-height 1.25
  position relative
  input
    cursor pointer
  &:hover
    color $input-hover-color
  &[disabled]
    color $input-disabled-color
    cursor not-allowed

.radio
  & + .radio
    margin-left 0.5em

.select
  display inline-block
  height 2.25em
  max-width 100%
  position relative
  vertical-align top
  &:after
    arrow($input-arrow)
    margin-top -0.375em
    right 1.125em
    top 50%
    z-index 4
  select
    input()
    cursor pointer
    display block
    font-size 1em
    max-width 100%
    outline none
    padding-right 2.5em
    &::-ms-expand
      display none
    &[disabled]:hover
      border-color $input-disabled-border-color
  // States
  &:hover
    &:after
      border-color $input-hover-color
  // Colors
  for $name, $pair in $colors
    $color = $pair['1']
    &.is-{$name} select
      border-color $color
      &:focus,
      &.is-focused,
      &:active,
      &.is-active
        box-shadow $input-focus-box-shadow-size $input-focus-box-shadow-color
  // Sizes
  &.is-small
    control-small()
  &.is-medium
    control-medium()
  &.is-large
    control-large()
  // Modifiers
  &.is-disabled
    &:after
      border-color $input-disabled-color
  &.is-fullwidth
    width 100%
    select
      width 100%
  &.is-loading
    &:after
      loader()
      margin-top 0
      position absolute
      right 0.625em
      top 0.625em
      transform none
    &.is-small:after
      font-size $size-small
    &.is-medium:after
      font-size $size-medium
    &.is-large:after
      font-size $size-large

.file
  unselectable()
  align-items stretch
  display flex
  justify-content flex-start
  position relative
  &.is-small
    font-size $size-small
  &.is-medium
    font-size $size-medium
    .file-icon
      .{$icon-selector}
        font-size 21px
  &.is-large
    font-size $size-large
    .file-icon
      .{$icon-selector}
        font-size 28px
  &.has-name
    .file-cta
      border-bottom-right-radius 0
      border-top-right-radius 0
    .file-name
      border-bottom-left-radius 0
      border-top-left-radius 0
    &.is-empty
      .file-cta
        border-radius $file-radius
      .file-name
        display none
  &.is-centered
    justify-content center
  &.is-right
    justify-content flex-end
  &.is-boxed
    .file-label
      flex-direction column
    .file-cta
      flex-direction column
      height auto
      padding 1em 3em
    .file-name
      border-width 0 1px 1px
    .file-icon
      height 1.5em
      width 1.5em
      .{$icon-selector}
        font-size 21px
    &.is-small
      .file-icon .{$icon-selector}
        font-size 14px
    &.is-medium
      .file-icon .{$icon-selector}
        font-size 28px
    &.is-large
      .file-icon .{$icon-selector}
        font-size 35px
    &.has-path
      .file-cta
        border-radius $file-radius $file-radius 0 0
      .file-name
        border-radius 0 0 $file-radius $file-radius
        border-width 0 1px 1px
    &.is-right
      .file-cta
        border-radius 0 $file-radius $file-radius 0
      .file-name
        border-radius $file-radius 0 0 $file-radius
        border-width 1px 0 1px 1px
        order -1
    &.is-fullwidth
      .file-label
        width 100%
      .file-name
        flex-grow 1
        max-width none

.file-label
  align-items stretch
  display flex
  cursor pointer
  justify-content flex-start
  overflow hidden
  position relative
  &:hover
    .file-cta
      background-color darken($file-cta-background-color, 2.5%)
      color $file-cta-hover-color
    .file-name
      border-color darken($file-name-border-color, 2.5%)
  &:active
    .file-cta
      background-color darken($file-cta-background-color, 5%)
      color $file-cta-active-color
    .file-name
      border-color darken($file-name-border-color, 5%)

.file-input
  height 0.01em
  left 0
  outline none
  position absolute
  top 0
  width 0.01em

.file-cta,
.file-name
  control()
  border-color $file-border-color
  border-radius $file-radius
  font-size 1em
  padding-left 1em
  padding-right 1em
  white-space nowrap

.file-cta
  background-color $file-cta-background-color
  color $file-cta-color

.file-name
  border-color $file-name-border-color
  border-style $file-name-border-style
  border-width $file-name-border-width
  display block
  max-width $file-name-max-width
  overflow hidden
  text-align left
  text-overflow ellipsis

.file-icon
  align-items center
  display flex
  height 1em
  justify-content center
  margin-right 0.5em
  width 1em
  .{$icon-selector}
    font-size 14px

.label
  color $label-color
  display block
  font-size $size-normal
  font-weight $label-weight
  &:not(:last-child)
    margin-bottom 0.5em
  // Sizes
  &.is-small
    font-size $size-small
  &.is-medium
    font-size $size-medium
  &.is-large
    font-size $size-large

.help
  display block
  font-size $help-size
  margin-top 0.25rem
  for $name, $pair in $colors
    $color = $pair['1']
    &.is-{$name}
      color $color

// Containers

.field
  &:not(:last-child)
    margin-bottom 0.75rem
  // Modifiers
  &.has-addons
    display flex
    justify-content flex-start
    .control
      &:not(:last-child)
        margin-right -1px
      &:first-child
        .button,
        .input,
        .select select
          border-bottom-left-radius $input-radius
          border-top-left-radius $input-radius
      &:last-child
        .button,
        .input,
        .select select
          border-bottom-right-radius $input-radius
          border-top-right-radius $input-radius
      .button,
      .input,
      .select select
        border-radius 0
        &:hover,
        &.is-hovered
          z-index 2
        &:focus,
        &.is-focused,
        &:active,
        &.is-active
          z-index 3
          &:hover
            z-index 4
      &.is-expanded
        flex-grow 1
    &.has-addons-centered
      justify-content center
    &.has-addons-right
      justify-content flex-end
    &.has-addons-fullwidth
      .control
        flex-grow 1
        flex-shrink 0
  &.is-grouped
    display flex
    justify-content flex-start
    & > .control
      flex-shrink 0
      &:not(:last-child)
        margin-bottom 0
        margin-right 0.75rem
      &.is-expanded
        flex-grow 1
        flex-shrink 1
    &.is-grouped-centered
      justify-content center
    &.is-grouped-right
      justify-content flex-end
  &.is-horizontal
    +tablet()
      display flex

.field-label
  .label
    font-size inherit
  +mobile()
    margin-bottom 0.5rem
  +tablet()
    flex-basis 0
    flex-grow 1
    flex-shrink 0
    margin-right 1.5rem
    padding-top 0.375em
    text-align right
    &.is-small
      font-size $size-small
      padding-top 0.375em
    &.is-normal
      padding-top 0.375em
    &.is-medium
      font-size $size-medium
      padding-top 0.375em
    &.is-large
      font-size $size-large
      padding-top 0.375em

.field-body
  .field .field
    margin-bottom 0
  +tablet()
    display flex
    flex-basis 0
    flex-grow 5
    flex-shrink 1
    .field
      margin-bottom 0
    & > .field
      flex-shrink 1
      &:not(.is-narrow)
        flex-grow 1
      &:not(:last-child)
        margin-right 0.75rem

.control
  font-size $size-normal
  position relative
  text-align left
  // Modifiers
  // DEPRECATED
  &.has-icon
    .icon
      color $input-icon-color
      height 2.25em
      pointer-events none
      position absolute
      top 0
      width 2.25em
      z-index 4
    .input
      &:focus
        & + .icon
          color $input-icon-active-color
      &.is-small
        & + .icon
          font-size $size-small
      &.is-medium
        & + .icon
          font-size $size-medium
      &.is-large
        & + .icon
          font-size $size-large
    &:not(.has-icon-right)
      .icon
        left 0
      .input
        padding-left 2.25em
    &.has-icon-right
      .icon
        right 0
      .input
        padding-right 2.25em
  &.has-icons-left,
  &.has-icons-right
    .input,
    .select select
      &:focus
        & ~ .icon
          color $input-icon-active-color
      &.is-small ~ .icon
        font-size $size-small
      &.is-medium ~ .icon
        font-size $size-medium
      &.is-large ~ .icon
        font-size $size-large
    .icon
      color $input-icon-color
      height 2.25em
      pointer-events none
      position absolute
      top 0
      width 2.25em
      z-index 4
  &.has-icons-left
    .input,
    .select select
      padding-left 2.25em
    .icon.is-left
      left 0
  &.has-icons-right
    .input,
    .select select
      padding-right 2.25em
    .icon.is-right
      right 0

  &.is-loading
    &:after
      loader()
      position absolute !important
      right 0.625em
      top 0.625em
    &.is-small:after
      font-size $size-small
    &.is-medium:after
      font-size $size-medium
    &.is-large:after
      font-size $size-large