.Formol_Field
  margin: $formol-field-margin 0
  max-width: 100%
  width: fit-content
  width: -moz-fit-content
  width: -webkit-fit-content
  +field-colors($formol-color-inactive)

  &--required &__title
    &::before
      content: '* '


  &--readOnly
    &.Formol_Field--required
      .Formol_Field__title::before
        display: none

    .Formol_Field
      &__title
        font-size: $formol-font-size * .7

    .Formol_InputField, .Formol_TextAreaField, .Formol_PasswordField__wrapper, .Formol_FileField, .Formol_HTMLField
      +read-only-field__element

    .Formol_Field
      &--type-date, &--type-time
        &__element[type=date]
          -moz-appearance: textfield
          border: none
          clip-path: inset(0 17px 0 0)
          outline: none
          outline: 0


  &--disabled
    // cursor: default
    opacity: .75

    .Formol_Field__label
      &, & *
        cursor: default


  // states
  &:hover
    +field-colors($formol-color)

  &--modified, &--modified:hover
    +field-colors($formol-color)

  &--focus, &--focus:hover
    +field-colors($formol-color-action)

    *:focus
      outline: transparent

  &--error, &--error:hover
    box-shadow: none
    +field-colors($formol-color-error)


  // elements
  &__label
    color: inherit

  &__title
    color: inherit
    display: flex
    font-size: $formol-font-size * .85
    transition: color .2s
    width: 100%

    > svg
      margin-left: .5em
      min-width: 1em

  &__element
    background-color: $formol-background-color
    border: solid 1px
    border-color: inherit
    border-radius: .15em
    box-sizing: border-box
    box-shadow: none
    color: $formol-color
    font: inherit
    margin: .5em 0
    max-width: 100%
    padding: $formol-field-padding
    transition: border-color .2s

  &__unit
    display: inline-block
    margin-left: .75em

  &__error-text
    font-size: $formol-font-size * .85
    font-style: italic

    &::before
      background-color: currentColor
      content: ''
      display: inline-block
      height: 1px
      margin-right: .5em
      vertical-align: middle
      width: 1em