From 8c3c5ab861e286da36fd2b93e805f2e27220bbcb Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Thu, 10 Jul 2025 09:14:46 -0400
Subject: [PATCH] [CL-759] Remove browser style overrides for checkbox (#15552)

---
 apps/browser/src/popup/scss/base.scss              | 4 ++--
 libs/components/src/checkbox/checkbox.component.ts | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 2b625678b89..0565de1712c 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -100,7 +100,7 @@ a:not(popup-page a, popup-tab-navigation a) {
   }
 }
 
-input:not(bit-form-field input, bit-search input),
+input:not(bit-form-field input, bit-search input, input[bitcheckbox]),
 select:not(bit-form-field select),
 textarea:not(bit-form-field textarea) {
   @include themify($themes) {
@@ -109,7 +109,7 @@ textarea:not(bit-form-field textarea) {
   }
 }
 
-input,
+input:not(input[bitcheckbox]),
 select,
 textarea,
 button:not(bit-chip-select button) {
diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index c420b3f3473..6159b01d2b5 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -15,6 +15,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
   protected inputClasses = [
     "tw-appearance-none",
     "tw-outline-none",
+    "tw-box-border",
     "tw-relative",
     "tw-transition",
     "tw-cursor-pointer",
@@ -37,6 +38,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "before:tw-border",
     "before:tw-border-solid",
     "before:tw-border-secondary-500",
+    "before:tw-box-border",
 
     "after:tw-content-['']",
     "after:tw-block",
@@ -44,6 +46,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "after:tw-inset-0",
     "after:tw-h-[1.12rem]",
     "after:tw-w-[1.12rem]",
+    "after:tw-box-border",
 
     "hover:before:tw-border-2",
     "[&>label]:before:tw-border-2",