$label-color: v("text-strong") !default
$label-weight: v("weight-bold") !default

$help-size: v("size-small") !default

+register(label-color, $label-color, true)
+register(label-weight, $label-weight, true)
+register(help-size, $help-size, true)

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

.help
  display: block
  font-size: v("help-size")
  margin-top: 0.25rem
  @each $name in $colors-list
    &.is-#{$name}
      color: v($name)

// Containers

.field
  &:not(:last-child)
    margin-bottom: 0.75rem
  // Modifiers
  &.has-addons
    display: flex
    justify-content: flex-start
    .control
      &:not(:last-child)
        +ltr-property("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
          +ltr
            border-bottom-right-radius: 0
            border-top-right-radius: 0
          +rtl
            border-bottom-left-radius: 0
            border-top-left-radius: 0
      &:last-child:not(:only-child)
        .button,
        .input,
        .select select
          +ltr
            border-bottom-left-radius: 0
            border-top-left-radius: 0
          +rtl
            border-bottom-right-radius: 0
            border-top-right-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
        flex-shrink: 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
        +ltr-property("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
    +ltr-property("margin-right", 1.5rem)
    text-align: right
    &.is-small
      font-size: v("size-small")
      padding-top: 0.375em
    &.is-normal
      padding-top: 0.375em
    &.is-medium
      font-size: v("size-medium")
      padding-top: 0.375em
    &.is-large
      font-size: v("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)
        +ltr-property("margin-right", 0.75rem)

.control
  box-sizing: border-box
  clear: both
  font-size: v("size-normal")
  position: relative
  text-align: inherit
  // Modifiers
  &.has-icons-left,
  &.has-icons-right
    .input,
    .select
      &:focus
        & ~ .icon
          color: v("input-icon-active-color")
      &.is-small ~ .icon
        font-size: v("size-small")
      &.is-medium ~ .icon
        font-size: v("size-medium")
      &.is-large ~ .icon
        font-size: v("size-large")
    .icon
      color: v("input-icon-color")
      height: v("input-height")
      pointer-events: none
      position: absolute
      top: 0
      width: v("input-height")
      z-index: 4
  &.has-icons-left
    .input,
    .select select
      padding-left: v("input-height")
    .icon.is-left
      left: 0
  &.has-icons-right
    .input,
    .select select
      padding-right: v("input-height")
    .icon.is-right
      right: 0
  &.is-loading
    &::after
      @extend %loader
      position: absolute !important
      +ltr-property("right", 0.625em)
      top: 0.625em
      z-index: 4
    &.is-small:after
      font-size: v("size-small")
    &.is-medium:after
      font-size: v("size-medium")
    &.is-large:after
      font-size: v("size-large")