Actual gutter definition (#27797)

2 files changed, 4 insertions, 4 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 71eb746b8..fc8f4c21d 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -11,7 +11,7 @@
   position: relative;
   display: block;
   min-height: ($font-size-base * $line-height-base);
-  padding-left: $custom-control-gutter;
+  padding-left: ($custom-control-gutter + $custom-control-indicator-size);
 }
 
 .custom-control-inline {
@@ -75,7 +75,7 @@
   &::before {
     position: absolute;
     top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
-    left: -$custom-control-gutter;
+    left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
@@ -90,7 +90,7 @@
   &::after {
     position: absolute;
     top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
-    left: -$custom-control-gutter;
+    left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2d0816808..c7ddad276 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -515,7 +515,7 @@ $input-group-addon-border-color:        $input-border-color !default;
 
 $custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-$custom-control-gutter:                 1.5rem !default;
+$custom-control-gutter:                 .5rem !default;
 $custom-control-spacer-x:               1rem !default;
 
 $custom-control-indicator-size:         1rem !default;