@mixin gl-tmp-form-checkbox-inline-styles {
  @include gl-mt-1;
  @include gl-ml-0;
  @include gl-align-self-start;
  position: static;
  @include gl-h-auto;
  @include gl-mr-0;
}

.gl-form-checkbox-group {
  @include gl-line-height-normal;
}

.gl-form-checkbox,
.gl-form-radio {
  @include gl-font-base;
  @include gl-line-height-normal;
  @include gl-text-gray-900;

  &.form-check {
    @include gl-display-flex;
    @include gl-pl-0;
  }

  &.form-check-inline {
    @include gl-display-inline-flex;
    @include gl-align-items-center;
  }

  .form-check-input {
    @include gl-tmp-form-checkbox-inline-styles;

    &:active,
    &:focus,
    &:focus:active {
      @include gl-focus;
    }
  }

  .form-check-label {
    @include gl-pl-3;
    @include gl-line-height-normal;
  }

  .form-check-input:disabled,
  .form-check-input:disabled ~ .form-check-label,
  .custom-control-input:disabled,
  .custom-control-input:disabled ~ .custom-control-label {
    @include gl-cursor-not-allowed;
    @include gl-text-gray-400;
  }

  &.custom-control {
    @include gl-pl-5;

    .custom-control-input ~ .custom-control-label {
      @include gl-cursor-pointer;
      @include gl-pl-3;
      @include gl-mb-3;

      &::before,
      &::after {
        top: 0;
        left: -$gl-spacing-scale-5;
      }

      &::before {
        @include gl-bg-white;
        @include gl-border-gray-400;
      }
    }

    .custom-control-input:not(:disabled):focus ~ .custom-control-label {
      &::before {
        @include gl-border-gray-500;
        @include gl-focus;
      }
    }

    .custom-control-input:checked ~ .custom-control-label {
      &::before {
        @include gl-bg-blue-500;
        @include gl-border-blue-500;
      }
    }

    .custom-control-input[type='checkbox']:checked ~ .custom-control-label,
    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
    .custom-control-input[type='radio']:checked ~ .custom-control-label {
      &::after {
        @include gl-bg-white;
        background: 50% 50% no-repeat;
        mask-repeat: no-repeat;
        mask-position: center center;
      }
    }

    .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
      background-image: url('#{$gl-icon-check}');
      mask-image: url('#{$gl-icon-check}');
    }

    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
      background-image: url('#{$gl-icon-indeterminate}');
      mask-image: url('#{$gl-icon-indeterminate}');
    }

    .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
      background-image: url('#{$gl-icon-radio}');
      mask-image: url('#{$gl-icon-radio}');
    }

    .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label {
      &::before {
        @include gl-bg-blue-700;
        @include gl-border-blue-700;
      }
    }

    &.custom-checkbox {
      .custom-control-input:indeterminate ~ .custom-control-label::before {
        @include gl-bg-blue-500;
        @include gl-border-blue-500;
      }

      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
        @include gl-bg-blue-700;
        @include gl-border-blue-700;
      }
    }

    .custom-control-input:disabled ~ .custom-control-label {
      @include gl-cursor-not-allowed;

      &::before {
        @include gl-bg-gray-50;
        @include gl-border-gray-100;
        @include gl-pointer-events-auto;
      }
    }

    .custom-control-input:checked:disabled ~ .custom-control-label,
    .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
      &::before {
        @include gl-bg-gray-100;
        @include gl-border-gray-100;
      }

      &::after {
        background-image: none;
        @include gl-bg-gray-500;

        /* Ensure state indicators (like the checkmark for checked or
           the dash for indeterminate) are visible in Windows High
           Contrast Mode.
        */
        @media screen and (forced-colors: active) {
          forced-color-adjust: none;
          /* system color reference for disabled text applied to 
             background here.
          */
          // stylelint-disable-next-line
          background-color: GrayText;
        }
      }
    }
  }

  .help-text {
    @include gl-mt-2;
    @include gl-text-gray-500;
    @include gl-mb-0;
    @include gl-font-base;
    @include gl-line-height-normal;
  }
}