refactor(Callout): update CSS Variables

Author: mrholek

docs/content/components/callout.md

@@ -26,12 +26,14 @@ Callout component is prepared for any length of text, as well as an optional ele
 
 ## Customizing
 
-### CSS variables
+### CSS Variables
 
-Callouts use local CSS variables on .callout for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+Callouts use local CSS variables on `.callout` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="callout-css-vars" file="scss/_callout.scss" >}}
+
+### SASS variables
 
-{{< css-vars-docs file="scss/_callout.scss" >}}
-### SASS
 {{< scss-docs name="callout-variables" file="scss/_variables.scss" >}}
 
 #### Variants

scss/_callout.scss

@@ -1,16 +1,28 @@
 .callout {
-  padding: $callout-padding-y $callout-padding-x;
-  margin: $callout-margin-y $callout-margin-x;
-  border: var(--#{$prefix}callout-border-width, $callout-border-width) solid var(--#{$prefix}callout-border-color, $callout-border-color);
-  @include ltr-rtl("border-left-width", var(--#{$prefix}callout-border-left-width, $callout-border-left-width));
-  @include border-radius($callout-border-radius);
+  // scss-docs-start callout-css-vars
+  --#{$prefix}callout-padding-x: #{$callout-padding-x};
+  --#{$prefix}callout-padding-y: #{$callout-padding-y};
+  --#{$prefix}callout-margin-x: #{$callout-margin-x};
+  --#{$prefix}callout-margin-y: #{$callout-margin-y};
+  --#{$prefix}callout-border-width: #{$callout-border-width};
+  --#{$prefix}callout-border-color: #{$callout-border-color};
+  --#{$prefix}callout-border-left-width: #{$callout-border-left-width};
+  --#{$prefix}callout-border-radius: #{$callout-border-radius};
+  // scss-docs-end callout-css-vars
+
+  padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
+  margin: var(--#{$prefix}callout-margin-y) var(--#{$prefix}callout-margin-x);
+  border: var(--#{$prefix}callout-border-width) solid var(--#{$prefix}callout-border-color);
+  @include ltr-rtl("border-left-width", var(--#{$prefix}callout-border-left-width));
+  @include ltr-rtl("border-left-color", var(--#{$prefix}callout-border-left-color));
+  @include border-radius(var(--#{$prefix}callout-border-radius));
 }
 
 // scss-docs-start callout-modifiers
 // Generate contextual modifier classes for colorizing the collor.
 @each $state, $value in $callout-variants {
   .callout-#{$state} {
-    @include ltr-rtl("border-left-color", var(--#{$prefix}callout-border-left-color, $value));
+    --#{$prefix}callout-border-left-color: #{$value};
   }
 }
 // scss-docs-end callout-modifiers