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

.gl-form-checkbox-group {
  @apply gl-leading-normal;
}

.gl-form-checkbox,
.gl-form-radio {
  @apply gl-text-base;
  @apply gl-leading-normal;
  @apply gl-text-default;

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

  &.form-check-inline {
    @apply gl-inline-flex;
    @apply gl-items-center;
  }

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

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

  .form-check-label {
    @apply gl-pl-3;
    @apply gl-leading-normal;
  }

  .form-check-input:disabled,
  .form-check-input:disabled ~ .form-check-label,
  .custom-control-input:disabled,
  .custom-control-input:disabled ~ .custom-control-label,
  .custom-control-input:disabled ~ .custom-control-label > .help-text {
    @apply gl-cursor-not-allowed;
    @apply gl-text-disabled;
  }

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

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

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

      &::before {
        background-color: var(--gl-control-background-color-default);
        border-color: var(--gl-control-border-color-default);
      }
    }

    .custom-control-input:not(:disabled):hover ~ .custom-control-label::before {
      border-color: var(--gl-control-border-color-hover);
    }

    .custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
      @apply gl-focus;
      border-color: var(--gl-control-border-color-focus);
    }

    .custom-control-input:checked ~ .custom-control-label::before {
      background-color: var(--gl-control-background-color-selected-default);
      border-color: var(--gl-control-border-color-selected-default);

      @media (forced-colors: active) {
        background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
        border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
      }
    }

    .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 {
        background: 50% 50% no-repeat;
        background-color: var(--gl-control-indicator-color-selected);
        mask-repeat: no-repeat;
        mask-position: center center;
      }
    }

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

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

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

    .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label {
      &::before {
        background-color: var(--gl-control-background-color-selected-hover);
        border-color: var(--gl-control-border-color-selected-hover);
      }
    }

    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label::before {
      background-color: var(--gl-control-background-color-selected-focus);
      border-color: var(--gl-control-border-color-selected-focus);
    }

    .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label,
    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label {
      &::before {
        @media (forced-colors: active) {
          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
          border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
        }
      }
    }

    &.custom-checkbox {
      .custom-control-input:indeterminate ~ .custom-control-label::before {
        background-color: var(--gl-control-background-color-selected-default);
        border-color: var(--gl-control-border-color-selected-default);

        @media (forced-colors: active) {
          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
          border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
        }
      }

      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before {
        background-color: var(--gl-control-background-color-selected-hover);
        border-color: var(--gl-control-border-color-selected-hover);
      }

      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
        background-color: var(--gl-control-background-color-selected-focus);
        border-color: var(--gl-control-border-color-selected-focus);
      }

      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
        @media (forced-colors: active) {
          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
          border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
        }
      }
    }

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

      &::before {
        @apply gl-pointer-events-auto;
        background-color: var(--gl-control-background-color-disabled);
        border-color: var(--gl-control-border-color-disabled);

        @media (forced-colors: active) {
          opacity: 0.5;
        }
      }
    }

    .custom-control-input:checked:disabled ~ .custom-control-label,
    .custom-control-input[type="checkbox"]:indeterminate:disabled ~ .custom-control-label {
      &::before {
        background-color: var(--gl-control-background-color-disabled);
        border-color: var(--gl-control-border-color-disabled);
      }

      &::after {
        background-image: none;
        background-color: var(--gl-control-indicator-color-disabled);

        /* 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 {
    @apply gl-mt-2;
    @apply gl-mb-0;
    @apply gl-text-base;
    @apply gl-leading-normal;
    @apply gl-text-subtle;
  }
}