@keyframes spinAround
  from
    transform: rotate(0deg)
  to
    transform: rotate(359deg)

.label
  display: block
  font-size: var(--group-form-field-label-font-size)
  line-height: var(--group-form-field-label-line-height)
  font-weight: var(--group-form-field-label-font-weight)
  font-family: var(--group-form-field-label-font-family), sans-serif
  hyphens: auto
  &:not(:last-child)
    margin-bottom: var(--group-form-field-label-margin-bottom)
  &.is-danger
    color: var(--group-form-field-label-danger-color)
  &.is-success
    color: var(--group-form-field-label-success-color)
  // deprecated
  &.is-warning
    color: var(--group-color-text-warning)
  &.is-disabled
    color: var(--group-form-field-label-disabled-color)

.help
  display: block
  margin-top: -2px
  color: var(--group-form-field-message-color)
  font-size: var(--group-form-field-message-font-size)
  font-weight: var(--group-form-field-message-font-weight)
  hyphens: auto
  &.is-danger
    color: var(--group-form-field-message-danger-color)
  &.is-success
    color: var(--group-form-field-message-success-color)
  // deprecated
  &.is-warning
    color: var(--group-color-text-warning)
  &.is-disabled
    color: var(--group-form-field-message-disabled-color)

.field
  &:not(:last-child)
    margin-bottom: 0.75rem
  // Modifiers
  &.has-addons
    display: flex
    justify-content: flex-start
    .control
      &:not(:last-child)
        +ltr-property("margin", -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
        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
      &:not(:last-child)
        margin-bottom: 0
      &.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", 1.5rem)
    text-align: right
    &.is-small
      font-size: var(--group-text-size-small)
      padding-top: 0.375em
    &.is-normal
      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", 0.75rem)

.control
  box-sizing: border-box
  clear: both
  font-size: var(--group-form-field-control-font-size)
  position: relative
  text-align: inherit
  &.is-loading
    &::after
      animation: spinAround 500ms infinite linear
      border: 2px solid var(--group-form-field-control-border-color-active)
      border-radius: var(--group-radius-rounded)
      border-right-color: transparent
      border-top-color: transparent
      content: ""
      display: block
      height: 1.125em
      width: 1.125em
      position: absolute !important
      +ltr-position(0.875rem)
      top: 0.875rem
      z-index: 4

.control.has-icons-right::after
  right: 2.3rem

.field.is-grouped
  gap: calc(var(--group-column-gap) / 2)

.field.has-direction-row.is-grouped
  flex-direction: row

.field.has-direction-column.is-grouped
  flex-direction: column
  width: fit-content
  .button
    width: 100%
  .group-button
    margin: 0 !important

+mobile()
  .field.has-direction-auto.is-grouped
    flex-wrap: wrap
    flex-direction: column
    width: 100%
    .control
      flex-grow: 1
      flex-shrink: 1
      min-width: 100%
      margin-right: 0 !important
      .button
        min-width: 100%
    &.is-reverse
      flex-direction: column-reverse