$input-color: $grey-darker !default $input-background-color: $white !default $input-border-color: $grey-lighter !default $input-height: $control-height !default $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default $input-placeholder-color: rgba($input-color, 0.3) !default

$input-hover-color: $grey-darker !default $input-hover-border-color: $grey-light !default

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

$input-disabled-color: $text-light !default $input-disabled-background-color: $background !default $input-disabled-border-color: $background !default $input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default

$input-arrow: $link !default

$input-icon-color: $grey-lighter !default $input-icon-active-color: $grey !default

$input-radius: $radius !default

$file-border-color: $border !default $file-radius: $radius !default

$file-cta-background-color: $white-ter !default $file-cta-color: $grey-dark !default $file-cta-hover-color: $grey-darker !default $file-cta-active-color: $grey-darker !default

$file-name-border-color: $border !default $file-name-border-style: solid !default $file-name-border-width: 1px 1px 1px 0 !default $file-name-max-width: 16em !default

$label-color: $grey-darker !default $label-weight: $weight-bold !default

$help-size: $size-small !default

input

@extend %control
background-color: $input-background-color
border-color: $input-border-color
color: $input-color
+placeholder
  color: $input-placeholder-color
&: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],
fieldset[disabled] &
  background-color: $input-disabled-background-color
  border-color: $input-disabled-border-color
  box-shadow: none
  color: $input-disabled-color
  +placeholder
    color: $input-disabled-placeholder-color

.input, .textarea

+input
box-shadow: $input-shadow
max-width: 100%
width: 100%
&[readonly]
  box-shadow: none
// Colors
@each $name, $pair in $colors
  $color: nth($pair, 1)
  &.is-#{$name}
    border-color: $color
    &:focus,
    &.is-focused,
    &:active,
    &.is-active
      box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// 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-rounded
  border-radius: $radius-rounded
  padding-left: 1em
  padding-right: 1em
&.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: initial
// 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],
fieldset[disabled] &
  color: $input-disabled-color
  cursor: not-allowed

.radio

& + .radio
  margin-left: 0.5em

.select

display: inline-block
max-width: 100%
position: relative
vertical-align: top
&:not(.is-multiple)
  height: $input-height
&:not(.is-multiple):not(.is-loading)
  &::after
    @extend %arrow
    border-color: $input-arrow
    right: 1.125em
    z-index: 4
&.is-rounded
  select
    border-radius: $radius-rounded
    padding-left: 1em
select
  +input
  cursor: pointer
  display: block
  font-size: 1em
  max-width: 100%
  outline: none
  &::-ms-expand
    display: none
  &[disabled]:hover,
  fieldset[disabled] &:hover
    border-color: $input-disabled-border-color
  &:not([multiple])
    padding-right: 2.5em
  &[multiple]
    height: auto
    padding: 0
    option
      padding: 0.5em 1em
// States
&:not(.is-multiple):not(.is-loading):hover
  &::after
    border-color: $input-hover-color
// Colors
@each $name, $pair in $colors
  $color: nth($pair, 1)
  &.is-#{$name}
    &:not(:hover)::after
      border-color: $color
    select
      border-color: $color
      &:hover,
      &.is-hovered
        border-color: darken($color, 5%)
      &:focus,
      &.is-focused,
      &:active,
      &.is-active
        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// 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
    @extend %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

@extend %unselectable
align-items: stretch
display: flex
justify-content: flex-start
position: relative
// Colors
@each $name, $pair in $colors
  $color: nth($pair, 1)
  $color-invert: nth($pair, 2)
  &.is-#{$name}
    .file-cta
      background-color: $color
      border-color: transparent
      color: $color-invert
    &:hover,
    &.is-hovered
      .file-cta
        background-color: darken($color, 2.5%)
        border-color: transparent
        color: $color-invert
    &:focus,
    &.is-focused
      .file-cta
        border-color: transparent
        box-shadow: 0 0 0.5em rgba($color, 0.25)
        color: $color-invert
    &:active,
    &.is-active
      .file-cta
        background-color: darken($color, 5%)
        border-color: transparent
        color: $color-invert
// Sizes
&.is-small
  font-size: $size-small
&.is-medium
  font-size: $size-medium
  .file-icon
    .fa
      font-size: 21px
&.is-large
  font-size: $size-large
  .file-icon
    .fa
      font-size: 28px
// Modifiers
&.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-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
    .fa
      font-size: 21px
  &.is-small
    .file-icon .fa
      font-size: 14px
  &.is-medium
    .file-icon .fa
      font-size: 28px
  &.is-large
    .file-icon .fa
      font-size: 35px
  &.has-name
    .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-centered
  justify-content: center
&.is-fullwidth
  .file-label
    width: 100%
  .file-name
    flex-grow: 1
    max-width: none
&.is-right
  justify-content: flex-end
  .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

.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: 100%
left: 0
opacity: 0
outline: none
position: absolute
top: 0
width: 100%

.file-cta, .file-name

@extend %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
.fa
  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
@each $name, $pair in $colors
  $color: nth($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
    &:not(:first-child):not(:last-child)
      .button,
      .input,
      .select select
        border-radius: 0
    &:first-child:not(:only-child)
      .button,
      .input,
      .select select
        border-bottom-right-radius: 0
        border-top-right-radius: 0
    &:last-child:not(:only-child)
      .button,
      .input,
      .select select
        border-bottom-left-radius: 0
        border-top-left-radius: 0
    .button,
    .input,
    .select select
      &:not([disabled])
        &: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-grouped-multiline
    flex-wrap: wrap
    & > .control
      &:last-child,
      &:not(:last-child)
        margin-bottom: 0.75rem
    &:last-child
      margin-bottom: -0.75rem
    &:not(:last-child)
      margin-bottom: 0
&.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
  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

box-sizing: border-box
clear: both //fixes the icon floating out of the input when help text is floated right
font-size: $size-normal
position: relative
text-align: left
// Modifiers
&.has-icons-left,
&.has-icons-right
  .input,
  .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: $input-height
    pointer-events: none
    position: absolute
    top: 0
    width: $input-height
    z-index: 4
&.has-icons-left
  .input,
  .select select
    padding-left: $input-height
  .icon.is-left
    left: 0
&.has-icons-right
  .input,
  .select select
    padding-right: $input-height
  .icon.is-right
    right: 0
&.is-loading
  &::after
    @extend %loader
    position: absolute !important
    right: 0.625em
    top: 0.625em
    z-index: 4
  &.is-small:after
    font-size: $size-small
  &.is-medium:after
    font-size: $size-medium
  &.is-large:after
    font-size: $size-large