/* Native controls for legacy Bootstrap wrappers. Custom switches and WKM controls
   retain their own styles. Important resets override legacy page-specific rules. */
.native-choice > input:is([type="checkbox"], [type="radio"]),
.native-choice > label:not(.checkbox-container) > input:is([type="checkbox"], [type="radio"]) {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: var(--native-choice-accent, #129cdc);
    display: inline-block !important;
    position: static !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    vertical-align: middle;
    flex-shrink: 0;
    cursor: pointer;
}

.native-choice > label:not(.checkbox-container),
label.native-choice {
    padding-left: 0 !important;
    margin-left: 0 !important;
    cursor: pointer;
}

/* Page themes may make labels block-level. Keep a radio and its label together. */
.radio.native-choice > input[type="radio"] + label {
    display: inline !important;
    vertical-align: middle;
}

.native-choice > label:not(.checkbox-container)::before,
.native-choice > label:not(.checkbox-container)::after,
label.native-choice::before,
label.native-choice::after {
    content: none !important;
    display: none !important;
}

.native-choice > input:is([type="checkbox"], [type="radio"]):focus-visible,
.native-choice > label:not(.checkbox-container) > input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 3px;
}

.native-choice > input:is([type="checkbox"], [type="radio"]):disabled,
.native-choice > label:not(.checkbox-container) > input:is([type="checkbox"], [type="radio"]):disabled {
    cursor: not-allowed;
}

.native-choice > input:disabled + label {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Keep the operating system's contrast palette in forced-colors mode. */
@media (forced-colors: active) {
    .native-choice input:is([type="checkbox"], [type="radio"]) {
        accent-color: auto;
    }
    .native-choice input:focus-visible {
        outline-color: Highlight;
    }
}

/* Legacy table offsets positioned the old label icon, not a visible input. */
body.tableFilter .table .checkbox.native-choice {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    margin: 0;
    vertical-align: middle;
}

.native-choice--standalone > input[type="checkbox"] {
    margin: 0 !important;
}

.native-choice--standalone > label:empty {
    display: none;
}