Checkbox focus state is cut off when inside a container with an overflow

[jendowns]

Detailed description

Whenever the Checkbox component sits inside a container with a non-default/initial overflow value (like overflow: auto or overflow: hidden, its focus outline is cut off at the edge of the container.

This is likely because the focus outline uses box-shadow & is not currently accommodating for the extra space needed.

Screenshots:

With overflow	Without overflow

Steps to reproduce the issue

1. Go to the storybook: https://carbon-components-react.netlify.app/?path=/story/checkbox--checked
2. Inspect Checkbox and find the wrapping <fieldset> element
3. In the browser inspector, change the <fieldset> to overflow: auto or overflow: hidden
4. Focus on a Checkbox to see the focus "outline" (i.e., box-shadow) is cut off.

[jendowns]

There are several approaches to fix this probably, but I do have a quick idea that involves added 2px to make up for the spacing needed for the box-shadow. I'll open a PR for that proposal momentarily 👍

[emyarod]

this issue is unresolved

https://codesandbox.io/s/spring-night-tnvxu?file=/index.js

ref #7620
related #7113