FormToggle: component styles for external use (#12385)

* FormToggle wrapper class needs inline-block styling.

Necessary for proper positioning of elements within .components-form-toggle.

* Elements within FormToggle component need to have border-box box-sizing.

This styling occurs within the block-editor on the post edit screen but does not exist outside of it. Moving this box-sizing value to the component resolves #8871.

packages/components/src/form-toggle/style.scss

@@ -4,12 +4,14 @@ $toggle-border-width: 2px;
 
 .components-form-toggle {
 	position: relative;
+	display: inline-block;
 
 	// On/Off icon indicators.
 	.components-form-toggle__on,
 	.components-form-toggle__off {
 		position: absolute;
 		top: $toggle-border-width * 3;
+		box-sizing: border-box;
 	}
 
 	.components-form-toggle__off {
@@ -26,6 +28,7 @@ $toggle-border-width: 2px;
 	.components-form-toggle__track {
 		content: "";
 		display: inline-block;
+		box-sizing: border-box;
 		vertical-align: top;
 		background-color: $white;
 		border: $toggle-border-width solid $dark-gray-300;
@@ -38,6 +41,7 @@ $toggle-border-width: 2px;
 	.components-form-toggle__thumb {
 		display: block;
 		position: absolute;
+		box-sizing: border-box;
 		top: $toggle-border-width * 2;
 		left: $toggle-border-width * 2;
 		width: $toggle-height - ($toggle-border-width * 4);