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

    &:focus {
        outline: none;
    }

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

        @media screen and (-ms-high-contrast: active) {
            color: graytext;
        }

        .bolt-checkmark {
            @media screen and (-ms-high-contrast: active) {
                border-color: graytext;
            }
        }

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

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

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

    &:not(.labelled) {
        margin: 2px;
    }

    &.checked .bolt-checkmark {
        border: 1px solid transparent;
        background-color: $communication-background;
        color: $text-on-communication-background;

        @media screen and (-ms-high-contrast: active) {
            background-color: highlight;
        }
    }

    &:not(.checked) .bolt-checkmark {
        border: 1px solid $secondary-text;
        @media screen and (-ms-high-contrast: active) {
            color: window;
            border-color: windowtext;
        }

        &.icon {
            visibility: hidden;
        }
    }
}

.bolt-checkmark {
    border-radius: 4px;
    color: transparent;
    padding: 1px;
    height: 16px;
    width: 16px;
}

.bolt-checkbox-label {
    padding-left: 10px;
    padding-bottom: 1px;
    font-size: $fontSizeM;
}

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

    &:not(.checked):not(.labelled) .bolt-checkmark {
        border: 1px solid $communication-background;
    }

    &.checked:not(.labelled) .bolt-checkmark {
        border: 1px solid $backgroundColor;
    }

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