// COMPONENT: Field: wraps one or more form elements into a horizontal row.
// Useful for adding accessory glyphs to form elements or grouping inputs and
// submit buttons.
.field
  $field-children: "#{$controls}, .button, .dropdown, label, input[type=submit]"

  align-items: stretch
  background-color: $background
  display: inline-flex

  &.field--accessory
    position: relative

    .field-accessory
      $accessory-width: $gutter

      left: $gutter
      pointer-events: none
      position: absolute
      top: 50%
      transform: translateY(-50%)
      width: $accessory-width

      +
        #{$field-children}
          padding-left: $gutter * 2 + $accessory-width

  #{$controls}
    background-color: transparent
    flex: 1

  > *
    border-radius: 0 !important
    margin: 0 !important

    > *
      border-radius: inherit

    &:first-child,
    &.sr-only:first-child ~ *:not([type=hidden]),
    &[type=hidden]:first-child ~ *:not([type=hidden])
      border-bottom-left-radius: $border-radius !important
      border-top-left-radius: $border-radius !important

    &[type=hidden]:first-child ~ *:not([type=hidden]) ~ *
      border-bottom-left-radius: 0 !important
      border-top-left-radius: 0 !important

    &:last-child
      border-bottom-right-radius: $border-radius !important
      border-top-right-radius: $border-radius !important

    +
      #{$field-children}
        margin-left: (-1px) !important
