From 6a9b9af59e0e279e3fc6eb46a043f9a4eae578fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Mon, 10 Jul 2023 16:26:44 +0200
Subject: [PATCH] New Sass variable to change vertical rule width

---
 scss/_variables.scss                           | 4 ++++
 scss/helpers/_vr.scss                          | 2 +-
 site/content/docs/5.3/helpers/vertical-rule.md | 8 ++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 42a0106931cf..eb066c60d3a7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -705,6 +705,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index 9bca099536c2..b6f9d42cb130 100644
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,7 +1,7 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: $vr-border-width;
   min-height: 1em;
   background-color: currentcolor;
   opacity: $hr-opacity;
diff --git a/site/content/docs/5.3/helpers/vertical-rule.md b/site/content/docs/5.3/helpers/vertical-rule.md
index 334eb3e0a457..130f97b8a680 100644
--- a/site/content/docs/5.3/helpers/vertical-rule.md
+++ b/site/content/docs/5.3/helpers/vertical-rule.md
@@ -43,3 +43,11 @@ They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
   <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
+
+## CSS
+
+### Sass variables
+
+Customize the vertical rule Sass variable to change its width.
+
+{{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}