Increase radio dimensions to match checkboxes (WordPress#27377)

* Increase radio width to match checkboxes

* Add radio styling to the mixin

* Remove commented out lines

* Update dot positioning on radio mixin

packages/base-styles/_mixins.scss

@@ -358,20 +358,26 @@
 	margin-right: $grid-unit-15;
 	transition: none;
 	border-radius: $radius-round;
+	width: $radio-input-size-sm;
+	height: $radio-input-size-sm;
+
+	@include break-small() {
+		height: $radio-input-size;
+		width: $radio-input-size;
+	}
 
 	&:checked::before {
-		width: 7px;
-		height: 7px;
-		margin: 8px 0 0 8px;
+		width: 8px;
+		height: 8px;
+		transform: translate(7px, 7px);
+		margin: 0;
 		background-color: $white;
 
 		// This border serves as a background color in Windows High Contrast mode.
-		border: 3px solid $white;
+		border: 4px solid $white;
 
-		@include break-medium() {
-			width: 6px;
-			height: 6px;
-			margin: 4px 0 0 4px;
+		@include break-small() {
+			transform: translate(5px, 5px);
 		}
 	}
 

packages/base-styles/_variables.scss

@@ -19,6 +19,8 @@ $border-width: 1px;
 $border-width-focus: 1.5px;
 $border-width-tab: 4px;
 $helptext-font-size: 12px;
+$radio-input-size: 20px;
+$radio-input-size-sm: 24px; // Width & height for small viewports.
 
 /**
  * Grid System.

packages/editor/src/components/post-visibility/style.scss

@@ -21,16 +21,19 @@
 
 	.editor-post-visibility__dialog-info {
 		margin-top: 0;
-		margin-left: 28px;
+		margin-left: $grid-unit-40;
 	}
 
 	// Remove bottom margin on the last label only.
 	.editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info {
 		margin-bottom: 0;
 	}
+}
 
+.editor-post-visibility__dialog-password {
 	.editor-post-visibility__dialog-password-input[type="text"] {
 		@include input-control;
-		margin-left: 28px;
+		margin-left: $grid-unit * 4.5;
+		margin-top: $grid-unit-10;
 	}
 }