[CL-620] add padding to increase checkbox clickable area

[BryanCunningham]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/CL-620

📔 Objective

Increase size of checkbox clickable area

In order to achieve this I needed to:

• Move all the visual styling from the input itself to it's ::before element
• Move the mask related styles to the ::after element
• Remove built in margin from checkbox. Apply spacing through bit-form-control component

📸 Screenshots

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[github-actions]

Checkmarx One – Scan Summary & Details – 3bf53a9c-1131-4bbe-9f75-b8d94fc7fc51

Great job, no security vulnerabilities found in this Pull Request

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 37.14%. Comparing base (522acf5) to head (cc0991d).
Report is 2 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
libs/components/src/checkbox/checkbox.stories.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15331      +/-   ##
==========================================
- Coverage   37.15%   37.14%   -0.01%     
==========================================
  Files        3272     3272              
  Lines       94367    94368       +1     
  Branches    14226    14226              
==========================================
- Hits        35062    35055       -7     
- Misses      57855    57863       +8     
  Partials     1450     1450              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[vleague2]

Couple of stories that look a little off:

• Form > checkbox > disabled
• Vault > items > individual -- the checkbox in the header is misaligned. I remember this one being annoying to deal with the last time I made checkbox changes

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud