@mixin gl-tmp-form-checkbox-inline-styles {
  @include gl-mt-1;
  @include gl-ml-0;
  @include gl-align-self-start;
  @include gl-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 {
    @include gl-cursor-not-allowed;
    @include gl-text-gray-500;
  }

  &.custom-control {
    .custom-control-input ~ .custom-control-label {
      @include gl-cursor-pointer;

      &::before,
      &::after {
        @include gl-top-0;
      }

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

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

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

    .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,
      .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-opacity-5;
        @include gl-pointer-events-auto;
      }
    }
  }

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