.m-form-field {
  .a-text-input--full {
    box-sizing: border-box;
    width: 100%;
  }

  .a-label + .a-text-input {
    margin-top: unit(5px / @base-font-size-px, em);
  }

  &--checkbox,
  &--radio {
    .a-label {
      // We need to turn off autoprefixing for the inline-grid because
      // IE does not handle an inline-grid like other browsers,
      // leading to an extremely narrow column of text for the label
      // and the checkbox or radio widget covering the first part of it.
      // The Autoprefixer control comment below ensures that the following
      // property is only picked up by browsers with standard support.

      /* autoprefixer: ignore next */
      display: inline-grid;
      // 30px is width of checkbox/radio button plus the needed padding.
      grid-template-columns: unit(30px / @base-font-size-px, em) auto;
      vertical-align: top;
      cursor: pointer;
      // Wrap long words in narrow form fields to prevent clipping
      overflow-wrap: anywhere;

      &::before {
        display: inline-block;
        grid-row-start: 1;
        grid-row-end: 3;
        border: 1px solid @form-field-input-border;
        height: unit(18px / @base-font-size-px, em);
        width: unit(18px / @base-font-size-px, em);
        margin-right: 10px;
        background-color: @input-bg;
        content: '';
        vertical-align: top;

        // Offset so that the checkbox/radio fits within focused area.
        position: relative;
        top: 1px;
        left: 1px;
      }

      &:hover::before,
      &.hover::before {
        border-color: @input-border__hover;
      }
    }

    // Ensure the helper text appears on its own line below the label.
    .a-label__helper {
      display: block;
    }

    .a-checkbox,
    .a-radio {
      .u-visually-hidden();

      &:focus + .a-label,
      &.focus + .a-label {
        outline: 1px dotted @input-border__focused;
        // The outline-offset property is not supported in IE.
        outline-offset: 1px;
      }

      &:disabled {
        &:checked + .a-label::before,
        &:focus + .a-label::before,
        &.focus + .a-label::before,
        &:hover + .a-label::before,
        &.hover + .a-label::before {
          border-color: @input-border;
          outline: none;
          box-shadow: none; // Applies only to radio buttons.
        }

        & + .a-label {
          cursor: not-allowed;
          color: @input-text__disabled;

          &::before {
            background: @input-bg__disabled;
            border-color: @form-field-input-border__disabled;
          }
        }
      }
    }
  }

  &--checkbox {
    .a-checkbox {
      &:focus + .a-label::before,
      &.focus + .a-label::before {
        border-color: @input-border__focused;
        box-shadow: 0 0 0 1px @input-border__focused;
      }

      &:hover + .a-label::before,
      &.hover + .a-label::before {
        border-color: @input-border__hover;
        box-shadow: 0 0 0 1px @input-border__hover;
      }

      &:checked + .a-label::before {
        .u-svg-inline-bg( 'approved' );

        background-size: auto @cf-icon-height;
        background-repeat: no-repeat;
        background-position: center 0;
      }
      &:disabled:checked + .a-label::before {
        // rgb values are CFPB gray-40.
        // For some reason SVG isn't accepting hex values for the fill.
        .u-svg-inline-bg( 'approved', true );
      }
    }

    &-error {
      .a-label {
        &::before {
          border-color: @input-border__error;
          outline: 1px solid @input-border__error;
        }

        &:hover::before,
        &.hover::before {
          border-color: @input-border__hover;
          outline-color: @input-border__hover;
        }
      }

      .a-checkbox {
        &:hover + .a-label::before,
        &.hover + .a-label::before {
          border-color: @input-border__hover;
          outline-color: @input-border__hover;
        }

        &:focus + .a-label::before,
        &.focus + .a-label::before {
          border-color: @input-border__error;
          box-shadow: 0 0 0 1px @input-border__error;
          outline-color: @input-border__error;
        }

        &:focus + .a-label,
        &.focus + .a-label {
          outline: 1px dotted @input-border__error;
          outline-offset: 1px;
        }
      }
    }

    &-warning {
      .a-label {
        &::before {
          border-color: @input-border__warning;
          outline: 1px solid @input-border__warning;
        }

        &:hover::before,
        &.hover::before {
          border-color: @input-border__hover;
          outline-color: @input-border__hover;
        }
      }

      .a-checkbox {
        &:hover + .a-label::before,
        &.hover + .a-label::before {
          border-color: @input-border__hover;
          outline-color: @input-border__hover;
        }

        &:focus + .a-label::before,
        &.focus + .a-label::before {
          border-color: @input-border__warning;
          box-shadow: 0 0 0 1px @input-border__warning;
          outline-color: @input-border__warning;
        }

        &:focus + .a-label,
        &.focus + .a-label {
          outline: 1px dotted @input-border__warning;
          outline-offset: 1px;
        }
      }
    }

    &-success {
      .a-label {
        &::before {
          border-color: @input-border__success;
          outline: 1px solid @input-border__success;
        }

        &:hover::before,
        &.hover::before {
          border-color: @input-border__hover;
          outline-color: @input-border__hover;
        }
      }

      .a-checkbox {
        &:hover + .a-label::before,
        &.hover + .a-label::before {
          border-color: @input-border__hover;
          outline-color: @input-border__hover;
        }

        &:focus + .a-label::before,
        &.focus + .a-label::before {
          border-color: @input-border__success;
          box-shadow: 0 0 0 1px @input-border__success;
          outline-color: @input-border__success;
        }

        &:focus + .a-label,
        &.focus + .a-label {
          outline: 1px dotted @input-border__success;
          outline-offset: 1px;
        }
      }
    }
  }

  &--radio {
    .a-label {
      &::before {
        border-radius: 50%;

        /* The rotate is needed to fix a bug in Firefox where radio
                   button was not centered. */
        transform: rotate(0deg);
      }
    }

    .a-radio {
      &:focus + .a-label::before,
      &.focus + .a-label::before {
        outline: none;
        border-color: @input-border__focused;
        box-shadow: 0 0 0 1px @input-border__focused;
      }

      &:hover + .a-label::before,
      &.hover + .a-label::before {
        outline: none;
        border-color: @input-border__hover;
        box-shadow: 0 0 0 1px @input-border__hover;
      }

      &:checked + .a-label::before {
        background-color: @input-bg__selected;
        box-shadow: inset 0 0 0 2px @form-field-inset;
      }

      &:checked:disabled + .a-label::before {
        background-color: @input-bg__disabled-selected;
        box-shadow: inset 0 0 0 2px @input-bg__disabled;
      }

      &:focus:checked + .a-label::before,
      &.focus:checked + .a-label::before {
        border-color: @input-border__focused;
        box-shadow:
          0 0 0 1px @input-border__focused,
          inset 0 0 0 2px @form-field-inset;
      }

      &:hover:checked + .a-label::before,
      &.hover:checked + .a-label::before {
        border-color: @input-border__hover;
        box-shadow:
          0 0 0 1px @input-border__hover,
          inset 0 0 0 2px @form-field-inset;
      }
    }
  }

  &--lg-target {
    display: block;

    .a-label {
      box-sizing: border-box;
      width: 100%;
      padding: 15px;
      background-color: @form-field-input-lg-target-bg;
    }

    .a-checkbox,
    .a-radio {
      &:checked + .a-label {
        background-color: @form-field-input-lg-target-bg__selected;
        box-shadow: inset 0 0 0 1px @form-field-input-lg-target-border;
      }

      &:hover + .a-label,
      &.hover + .a-label,
      &:focus + .a-label,
      &.focus + .a-label {
        box-shadow: inset 0 0 0 2px @form-field-input-lg-target-border;
      }

      &:focus + .a-label,
      &.focus + .a-label,
      &:checked + .a-label {
        // The outline-offset property is not supported in IE.
        outline-offset: 1px;
      }

      &:disabled + .a-label,
      &:checked:disabled + .a-label,
      &:hover:disabled + .a-label {
        color: @input-text__disabled;
        box-shadow: none;
        background-color: @form-field-input-lg-target-bg__disabled;
      }

      &:checked:disabled + .a-label {
        &,
        &::before {
          border: 1px solid @form-field-input-border__disabled;
        }
      }
    }
  }

  // TODO: The same top margin is applied to field-level errors for input-
  // with-button forms in organisms/form.less; we should find a way to merge
  // these to be less repetitive.
  .a-form-alert {
    margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
  }
}