// COMPONENT: Form: a collection of controls with some standard styling
.form
  &.form--inline
    display: inline-block

  // COMPONENT: Form field: a collection of one or more <label> and <input /> tags
  .form-field
    display: block
    margin: $gutter 0
    max-width: $breakpoint-small-screen

    + .form-field
      margin-top: $gutter * 2

    .form-field-label
      display: block
      font-weight: bold
      margin-bottom: $gutter
      position: relative

      &.required
        &::after
          background-color: map-get($status, danger)
          content: ""
          border-radius: 100%
          display: inline-block
          height: round($input-padding)
          overflow: hidden
          vertical-align: top
          width: round($input-padding)

        .form-field-label-requirement
          font-size: $font-size-control
          font-weight: 300
          display: flex
          position: absolute
          right: 0
          top: 50%
          transform: translateY(-50%)
          transition: color 100ms $swift-in

    &:hover,
    &:focus-within
      .form-field-label.required .form-field-label-requirement
        color: $text

    &.form-field--error
      #{$controls}
        border-color: map-get($status, "error")

    .form-field-error-message, .form-field-hint
      margin: 0 0 $gutter 0

    .form-field-error-message
      color: map-get($status, "error")

    .form-field-hint
      font-size: $font-size-small

form.button_to, .form--line
  display: inline-block

.form--inline:not(:last-child)
  margin-right: $input-padding
