.o-hb-checkbox.form-switch {
    margin-bottom: 0;

    .form-check-input {
        --form-switch-bg: #{escape-svg($o-hb-form-switch-bg-image)};

        height: $o-hb-form-check-input-height;
        margin-top: ($line-height-base - $o-hb-form-check-input-height) * .5;
        border-color: $o-we-sidebar-content-field-border-color;
        background-color: $o-we-sidebar-content-field-input-bg;

        &:focus, &:hover {
            --form-switch-bg: #{escape-svg($o-hb-form-switch-focus-bg-image)};
        }

        &:checked {
            --form-switch-bg: #{escape-svg($o-hb-form-switch-checked-bg-image)};

            background-color: var(--o-hb-form-switch-color-active, #{$o-hb-form-check-input-checked-bg-color});
            border-color: var(--o-hb-form-switch-color-active, #{$o-hb-form-check-input-checked-border-color});
        }
    }

    &:focus, &:hover {
        .form-check-input:not(:disabled) {
            border-color: var(--o-hb-form-switch-color-active, #{$o-hb-form-check-input-checked-border-color});
            box-shadow: none;
        }
    }
    .form-check-input:focus-visible:not(:disabled) {
        box-shadow:
            0 0 0 #{$o-we-border-width} #{$o-we-bg-light},
            0 0 0 #{$o-we-border-width * 2} var(--o-hb-form-switch-color-active, #{$o-hb-form-check-input-checked-border-color});
    }
}