@import '../../_widgetsCommon.scss';
.bolt-checkbox {
    border-radius: 4px;
    color: $primary-text;
    display: inline-flex;
    align-items: center;

    &:focus {
        outline: none;

        @include ms-high-contrast-override {
            border: 2px solid;
            border-color: Highlight;
        }
    }

    &:focus-visible {
        outline: 2px solid $communication-background;
        outline-offset: -2px;

        @include ms-high-contrast-override {
            outline-color: Highlight;
        }
    }

    &.disabled {
        color: $disabled-text;
        cursor: default;

        @include ms-high-contrast-override {
            forced-color-adjust: none;
            color: graytext;
        }

        .bolt-checkmark {
            @include ms-high-contrast-override {
                border-color: graytext;
                color: graytext;
            }
        }

        &.checked .bolt-checkmark {
            background-color: $neutral-20;

            @include ms-high-contrast-override {
                background-color: transparent;
                border-color: graytext;
            }
        }

        &:not(.checked) .bolt-checkmark {
            border: 1px solid $neutral-20;

            @include ms-high-contrast-override {
                border-color: graytext;
            }
        }
    }

    &.labelled {
        padding: 2px 4px 2px 5px;
    }

    &:not(.labelled) {
        margin: 2px;
    }
    // CHECKED STATE
    &.checked .bolt-checkmark {
        border: 1px solid transparent;
        background-color: $communication-background;
        color: $text-on-communication-background;
        // High contrast
        @include theme-high-contrast {
            background-color: $backgroundColor;
            border: 1px solid $primary-text;

            .fabric-icon {
                color: $primary-text;
            }
        }
    }
    // UNCHECKED STATE - Base styling
    &:not(.checked):not(.disabled) .bolt-checkmark {
        border: 1px solid $secondary-text;

        @include ms-high-contrast-override {
            border-color: $primary-text;
            border-width: 2px;
            background-color: transparent;
        }

        .fabric-icon {
            visibility: hidden;
        }
    }
    // High contrast HOVER styles only
    &:hover:not(.disabled) {
        &:not(.checked) .bolt-checkmark {
            @include theme-high-contrast {
                background-color: $neutral-4;
                border-color: Highlight;
                border-width: 2px;
            }
        }
        // Checked on hover: keep checkmark visible
        &.checked .bolt-checkmark {
            @include theme-high-contrast {
                border: 2px solid Highlight;

                .fabric-icon {
                    color: Highlight;
                }
            }
        }
    }
}

.bolt-checkmark {
    border-radius: 0.25rem;
    color: transparent;
    padding: 1px;
    height: 1rem;
    width: 1rem;
    transition: background-color 0.1s ease, border-width 0.1s ease;
}

.bolt-checkbox-label {
    padding-left: 10px;
    padding-bottom: 1px;
}

// High contrast: ensure unchecked checkbox border contrasts with list row background
.bolt-list-row.focused,
.bolt-list-row:hover {
    .bolt-checkbox:not(.checked):not(.disabled) .bolt-checkmark {
        @include theme-high-contrast {
            border-color: $backgroundColor;
        }
    }
}

.bolt-focus-visible .bolt-checkbox.bolt-focus-treatment:focus {
    @include box-shadow-focus-rect(false, true);

    &:not(.checked):not(.labelled) .bolt-checkmark {
        border: 1px solid $communication-background;
        @include ms-high-contrast-highlight();

        @include ms-high-contrast-override {
            color: windowtext;
        }
    }

    &.checked:not(.labelled) .bolt-checkmark {
        border: 1px solid $backgroundColor;
        @include ms-high-contrast-highlight();

        @include ms-high-contrast-override {
            color: windowtext;
        }
    }

    .bolt-checkmark {
        @include ms-high-contrast-highlight();

        @include ms-high-contrast-override {
            color: windowtext;
        }
    }
}