@tabler/core 1.5.0 → 1.6.0

package/scss/ui/_accordion.scss

@@ -1,6 +1,7 @@
 @use '../config' as *;
 
 .accordion {
+  // scss-docs-start accordion-css-vars
   --accordion-color: var(--body-color);
   --accordion-border-color: var(--border-color);
   --accordion-border-radius: #{$accordion-border-radius};
@@ -14,11 +15,12 @@
   --accordion-btn-padding-x: var(--accordion-padding-x);
   --accordion-btn-padding-y: #{$accordion-button-padding-y};
   --accordion-btn-font-weight: var(--font-weight-medium);
+  --accordion-btn-line-height: #{$accordion-button-line-height};
   --accordion-body-padding-x: var(--accordion-padding-x);
   --accordion-body-padding-y: #{$accordion-body-padding-y};
   --accordion-btn-gap: #{$accordion-btn-gap};
   --accordion-header-gap: #{$accordion-header-gap};
-  --accordion-btn-focus-box-shadow: #{$accordion-btn-focus-box-shadow};
+  // scss-docs-end accordion-css-vars
 
   display: flex;
   flex-direction: column;
@@ -31,19 +33,32 @@
   gap: var(--accordion-btn-gap);
   align-items: center;
   width: 100%;
-  padding: var(--accordion-btn-padding-y) var(--accordion-padding-x);
+  padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
   font-size: inherit;
   font-weight: var(--accordion-btn-font-weight);
+  line-height: var(--accordion-btn-line-height);
   color: inherit;
   text-align: inherit;
-  background-color: transparent;
+  background-color: var(--accordion-btn-bg);
   border: 0;
+  @include focus-ring-transition(transform $transition-time);
+  overflow-anchor: none;
 
   &:not(.collapsed) {
     color: var(--accordion-active-color);
     border-bottom-color: transparent;
     box-shadow: none;
   }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus-visible {
+    z-index: 3;
+    @include focus-ring(true);
+    outline-offset: -1px;
+  }
 }
 
 .accordion-header {
@@ -57,23 +72,6 @@
   text-align: start;
   background-color: transparent;
   border: 0;
-  transition: transform $transition-time;
-  overflow-anchor: none;
-
-  &:hover {
-    z-index: 2;
-  }
-
-  &:focus {
-    z-index: 3;
-    outline: 0;
-    box-shadow: var(--accordion-btn-focus-box-shadow);
-
-    &:not(:focus-visible) {
-      outline: none;
-      box-shadow: none;
-    }
-  }
 }
 
 .accordion-button-icon {
@@ -94,17 +92,14 @@
     color: var(--accordion-active-color);
     transform: rotate(-180deg);
   }
-
-  path {
-    transition: $transition-time opacity;
-  }
 }
 
+// A plus turns into a close icon by rotating a quarter turn. Rotating the
+// toggle instead of hiding an svg path works with every icon source — inline
+// svg, a sprite `<use>`, an icon font (#2606).
 .accordion-button-toggle-plus {
   .accordion-button:not(.collapsed) & {
-    path:first-child {
-      opacity: 0;
-    }
+    transform: rotate(45deg);
   }
 }
 
@@ -127,10 +122,8 @@
   &:last-of-type {
     @include border-bottom-radius(var(--accordion-border-radius));
 
-    > .accordion-header {
-      &.collapsed {
-        @include border-bottom-radius(var(--accordion-inner-border-radius));
-      }
+    > .accordion-header:has(> .accordion-button.collapsed) {
+      @include border-bottom-radius(var(--accordion-inner-border-radius));
     }
 
     > .accordion-collapse {

package/scss/ui/_alerts.scss

@@ -1,6 +1,7 @@
 @use '../config' as *;
 
 .alert {
+  // scss-docs-start alert-css-vars
   --alert-variant-color: var(--body-color);
   --alert-color: var(--alert-variant-color);
   --alert-bg: #{color-transparent(var(--alert-variant-color), 0.16, var(--bg-surface))};
@@ -16,17 +17,19 @@
   --alert-icon-size: #{$alert-icon-size};
   --alert-padding-inline-end: #{$alert-padding-inline-end};
   --alert-gap: #{$alert-gap};
+  // scss-docs-end alert-css-vars
 
   position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: var(--alert-gap);
   padding: var(--alert-padding-y) var(--alert-padding-x);
   margin-bottom: var(--alert-margin-bottom);
   color: var(--alert-color);
-  background-color: color-mix(in sRGB, var(--alert-bg), var(--bg-surface));
+  background-color: color-mix(in oklab, var(--alert-bg), var(--bg-surface));
   border: var(--border-width) var(--border-style) var(--alert-border-color);
   @include border-radius(var(--alert-border-radius));
+
+  &:has(> .alert-icon) {
+    padding-inline-start: calc(var(--alert-padding-x) + var(--alert-icon-size) + var(--alert-gap));
+  }
 }
 
 .alert-heading {
@@ -42,9 +45,23 @@
 .alert-icon {
   width: var(--alert-icon-size) !important;
   height: var(--alert-icon-size) !important;
+  margin-inline-end: var(--alert-gap);
   color: var(--alert-color);
 }
 
+.alert > .alert-icon {
+  position: absolute;
+  inset-inline-start: var(--alert-padding-x);
+  top: var(--alert-padding-y);
+  margin-inline-end: 0;
+}
+
+.alert-action,
+.alert-link {
+  margin-inline-start: 0.25rem;
+  white-space: nowrap;
+}
+
 .alert-action {
   color: var(--alert-color);
   text-decoration: underline;
@@ -58,13 +75,17 @@
   margin: 0;
 }
 
+.alert > .alert-heading + div:has(+ .alert-action),
+.alert > .alert-heading + div:has(+ .alert-link) {
+  display: inline;
+}
+
 .alert-link {
   font-weight: $alert-link-font-weight;
   color: var(--alert-link-color);
 
-  &,
   &:hover {
-    color: var(--alert-color);
+    color: var(--alert-link-color);
   }
 }
 
@@ -73,8 +94,8 @@
 
   .btn-close {
     position: absolute;
-    inset-inline-end: calc(var(--alert-padding-y) / 2 - 1px);
-    top: calc(var(--alert-padding-x) / 2 - 1px);
+    inset-inline-end: calc(var(--alert-padding-x) / 2 - 1px);
+    top: calc(var(--alert-padding-y) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x);
   }

package/scss/ui/_avatars.scss

@@ -3,6 +3,7 @@
 @use '../config' as *;
 
 .avatar {
+  // scss-docs-start avatar-css-vars
   --avatar-size: var(--avatar-list-size, #{$avatar-size});
   --avatar-status-size: #{$avatar-status-size};
   --avatar-bg: #{$avatar-bg};
@@ -12,6 +13,7 @@
   --avatar-icon-size: #{$avatar-icon-size};
   --avatar-brand-size: #{$avatar-brand-size};
   --avatar-border-radius: #{$avatar-border-radius};
+  // scss-docs-end avatar-css-vars
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -163,7 +165,7 @@
   position: absolute;
   inset-inline-end: var(--avatar-brand-offset);
   bottom: var(--avatar-brand-offset);
-  z-index: 1000;
+  z-index: 1;
   width: var(--avatar-brand-size);
   height: var(--avatar-brand-size);
   background: var(--bg-surface);

package/scss/ui/_badges.scss

@@ -1,6 +1,7 @@
 @use '../config' as *;
 
 .badge {
+  // scss-docs-start badge-css-vars
   --badge-padding-x: #{$badge-padding-x};
   --badge-padding-y: #{$badge-padding-y};
   --badge-font-size: #{$badge-font-size};
@@ -10,6 +11,7 @@
   --badge-icon-size: 1em;
   --badge-line-height: 1;
   --badge-gap: #{$badge-gap};
+  // scss-docs-end badge-css-vars
   display: inline-flex;
   gap: var(--badge-gap);
   align-items: center;

package/scss/ui/_breadcrumbs.scss

@@ -3,6 +3,7 @@
 @use '../config' as *;
 
 .breadcrumb {
+  // scss-docs-start breadcrumb-css-vars
   --breadcrumb-padding-x: #{$breadcrumb-padding-x};
   --breadcrumb-padding-y: #{$breadcrumb-padding-y};
   --breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@@ -15,6 +16,7 @@
   --breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
   --breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
   --breadcrumb-link-color: #{$breadcrumb-link-color};
+  // scss-docs-end breadcrumb-css-vars
 
   display: flex;
   flex-wrap: wrap;

package/scss/ui/_buttons.scss

@@ -1,4 +1,4 @@
-@use 'sass:color';
+@use 'sass:list';
 @use 'sass:map';
 
 //
@@ -12,10 +12,10 @@
   --btn-bg: var(--bg-surface);
   --btn-color: var(--body-color);
   --btn-border-color: #{$btn-border-color};
-  --btn-hover-bg: var(--btn-bg);
+  --btn-hover-bg: var(--hover-bg);
   --btn-hover-border-color: var(--border-active-color);
   --btn-active-color: #{$active-color};
-  --btn-active-bg: #{$active-bg};
+  --btn-active-bg: var(--active-bg);
   --btn-active-border-color: #{$active-border-color};
   position: relative;
 
@@ -67,7 +67,7 @@
   // here would leave a disabled link button with the default surface and border.
   --btn-bg: transparent;
   --btn-border-color: transparent;
-  color: #{color.adjust($primary, $lightness: 5%)};
+  color: #{adjust-lightness-css(var(--primary), 5%)};
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
@@ -77,7 +77,7 @@
   }
 
   &:hover {
-    color: $link-hover-color;
+    color: #{$btn-link-hover-color};
     border-color: transparent;
   }
 }
@@ -89,69 +89,92 @@
   --btn-bg: transparent;
   --btn-border-color: transparent;
   --btn-box-shadow: none;
-  --btn-hover-bg: var(--bg-surface-secondary);
+  --btn-hover-bg: var(--hover-bg);
   --btn-hover-border-color: transparent;
   --btn-hover-color: var(--body-color);
 }
 
-@each $color, $value in map.merge($theme-colors, $social-colors) {
-  .btn-#{$color} {
-    @if $color == 'dark' {
-      --btn-border-color: var(--dark-mode-border-color);
-      --btn-hover-border-color: var(--dark-mode-border-active-color);
-      --btn-active-border-color: var(--dark-mode-border-active-color);
-    } @else {
-      --btn-border-color: transparent;
-      --btn-hover-border-color: transparent;
-      --btn-active-border-color: transparent;
+// Each color class only points the --btn-variant* tokens at its palette
+// colors; the shared rules below turn them into the button tokens. The rules
+// are grouped by variant (solid, outline, ghost) rather than by color, so each
+// token list is written once instead of once per color.
+$btn-colors: map.keys(map.merge($theme-colors, $social-colors));
+
+@function btn-color-selectors($patterns...) {
+  $selectors: ();
+  @each $pattern in $patterns {
+    @each $color in $btn-colors {
+      $selectors: list.append($selectors, str-replace($pattern, '{c}', '#{$color}'), $separator: comma);
     }
-
-    --btn-color: var(--#{$color}-fg, #{$white});
-    --btn-bg: var(--#{$color});
-    --btn-hover-color: var(--#{$color}-fg);
-    --btn-hover-bg: var(--#{$color}-darken);
-    --btn-active-color: var(--#{$color}-fg);
-    --btn-active-bg: var(--#{$color}-darken);
-    --btn-disabled-bg: var(--#{$color});
-    --btn-disabled-color: var(--#{$color}-fg);
-    --btn-box-shadow: var(--shadow-input);
   }
+  @return $selectors;
+}
 
+@each $color in $btn-colors {
+  .btn-#{$color},
   .btn-outline-#{$color},
-  .btn-outline.btn-#{$color} {
-    --btn-color: var(--#{$color});
-    --btn-bg: transparent;
-    --btn-border-color: var(--#{$color});
-    --btn-hover-color: var(--#{$color}-fg);
-    --btn-hover-border-color: transparent;
-    --btn-hover-bg: var(--#{$color});
-    --btn-active-color: var(--#{$color}-fg);
-    --btn-active-bg: var(--#{$color});
-    --btn-active-border-color: var(--#{$color});
-    --btn-disabled-color: var(--#{$color});
-    --btn-disabled-border-color: var(--#{$color});
+  .btn-ghost-#{$color} {
+    --btn-variant: var(--#{$color});
+    --btn-variant-fg: var(--#{$color}-fg);
+    --btn-variant-darken: var(--#{$color}-darken);
   }
+}
 
-  .btn-ghost-#{$color},
-  .btn-ghost.btn-#{$color} {
-    --btn-color: var(--#{$color});
-    --btn-bg: transparent;
-    --btn-border-color: transparent;
-    --btn-hover-color: var(--#{$color}-fg);
-    --btn-hover-bg: var(--#{$color});
-    --btn-hover-border-color: var(--#{$color});
-    --btn-active-color: var(--#{$color}-fg);
-    --btn-active-bg: var(--#{$color});
-    --btn-active-border-color: transparent;
-    --btn-active-shadow: #{$btn-active-box-shadow};
-    --btn-disabled-color: var(--#{$color});
-    --btn-disabled-bg: transparent;
-    --btn-disabled-border-color: transparent;
-    --gradient: none;
-    --btn-box-shadow: none;
+#{btn-color-selectors('.btn-{c}')} {
+  --btn-border-color: transparent;
+  --btn-hover-border-color: transparent;
+  --btn-active-border-color: transparent;
+  --btn-color: var(--btn-variant-fg, #{$white});
+  --btn-bg: var(--btn-variant);
+  --btn-hover-color: var(--btn-variant-fg);
+  --btn-hover-bg: var(--btn-variant-darken);
+  --btn-active-color: var(--btn-variant-fg);
+  --btn-active-bg: var(--btn-variant-darken);
+  --btn-disabled-bg: var(--btn-variant);
+  --btn-disabled-color: var(--btn-variant-fg);
+  --btn-box-shadow: var(--shadow-input);
+}
+
+@if map.has-key($theme-colors, 'dark') {
+  .btn-dark {
+    --btn-border-color: var(--dark-mode-border-color);
+    --btn-hover-border-color: var(--dark-mode-border-active-color);
+    --btn-active-border-color: var(--dark-mode-border-active-color);
   }
 }
 
+#{btn-color-selectors('.btn-outline-{c}', '.btn-outline.btn-{c}')} {
+  --btn-color: var(--btn-variant);
+  --btn-bg: transparent;
+  --btn-border-color: var(--btn-variant);
+  --btn-hover-color: var(--btn-variant-fg);
+  --btn-hover-border-color: transparent;
+  --btn-hover-bg: var(--btn-variant);
+  --btn-active-color: var(--btn-variant-fg);
+  --btn-active-bg: var(--btn-variant);
+  --btn-active-border-color: var(--btn-variant);
+  --btn-disabled-color: var(--btn-variant);
+  --btn-disabled-border-color: var(--btn-variant);
+}
+
+#{btn-color-selectors('.btn-ghost-{c}', '.btn-ghost.btn-{c}')} {
+  --btn-color: var(--btn-variant);
+  --btn-bg: transparent;
+  --btn-border-color: transparent;
+  --btn-hover-color: var(--btn-variant-fg);
+  --btn-hover-bg: var(--btn-variant);
+  --btn-hover-border-color: var(--btn-variant);
+  --btn-active-color: var(--btn-variant-fg);
+  --btn-active-bg: var(--btn-variant);
+  --btn-active-border-color: transparent;
+  --btn-active-shadow: #{$btn-active-box-shadow};
+  --btn-disabled-color: var(--btn-variant);
+  --btn-disabled-bg: transparent;
+  --btn-disabled-border-color: transparent;
+  --gradient: none;
+  --btn-box-shadow: none;
+}
+
 //
 // Button sizes
 //
@@ -200,6 +223,7 @@
 //
 .btn-icon,
 .btn-action {
+  @include focus-ring-transition();
   //[BUG] btn-sm and btn-xl with an icon looks broken
   //issue #2470 fixed
   min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
@@ -291,20 +315,21 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: -2px;
+    @include focus-ring();
+    outline-offset: calc(var(--focus-ring-width) * -1);
     box-shadow: none;
   }
 
   &:hover,
   &.show {
     color: var(--body-color);
-    background: var(--active-bg);
+    background: var(--hover-bg);
     border-color: transparent;
   }
 
   &.show {
     color: var(--primary);
+    background: var(--active-bg);
   }
 
   @include media-print() {

package/scss/ui/_calendars.scss

@@ -50,7 +50,7 @@
     width: var(--calendar-date-size);
     height: var(--calendar-date-size);
     line-height: var(--calendar-date-size);
-    color: #66758c;
+    color: var(--secondary-color);
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
@@ -60,18 +60,17 @@
     border: var(--border-width) var(--border-style) transparent;
     @include border-radius(var(--border-radius-pill));
     outline: 0;
-    @include transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time);
+    @include focus-ring-transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time);
 
     &:hover {
       color: var(--primary);
       text-decoration: none;
-      background: #fefeff;
+      background: var(--bg-surface);
       border-color: var(--border-color);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--primary);
-      outline-offset: 2px;
+      @include focus-ring(true);
     }
   }
 

package/scss/ui/_cards.scss

@@ -152,7 +152,7 @@
 
   &:hover {
     text-decoration: none;
-    background: $active-bg;
+    background: var(--active-bg);
   }
 
   & + & {
@@ -192,7 +192,7 @@ Stacked card
     top: 0;
     bottom: 0;
     content: '';
-    background: rgba($dark, 0.48);
+    background: color-transparent(var(--dark), 0.48);
   }
 
   &:first-child,
@@ -302,16 +302,23 @@ Stacked card
 }
 
 // Card progress
-.card-progress {
+// `.card >` outranks ui/_progress.scss's later `.progress { position: relative; }`.
+.card > .card-progress {
   --card-progress-height: #{$card-progress-height};
-  height: var(--card-progress-height);
+  --card-progress-offset: calc(-1 * var(--card-border-width));
+  position: absolute;
+  inset: var(--card-progress-offset);
+  width: auto;
+  height: auto;
+  pointer-events: none;
+  @include border-radius(var(--card-border-radius));
 
   &:last-child {
-    @include border-radius(0 0 2px 2px);
+    mask-image: linear-gradient(to top, #000 var(--card-progress-height), transparent var(--card-progress-height));
   }
 
   &:first-child {
-    @include border-radius(2px 2px 0 0);
+    mask-image: linear-gradient(to bottom, #000 var(--card-progress-height), transparent var(--card-progress-height));
   }
 }
 
@@ -405,8 +412,6 @@ Card optinos
 .card-options {
   --card-options-top: #{$card-options-top};
   --card-options-inset: #{$card-options-inset};
-  inset-inline-end: var(--card-options-inset);
-  top: var(--card-options-top);
   display: flex;
   margin-inline-start: auto;
 }
@@ -423,33 +428,31 @@ Card optinos
 /**
 Card status
  */
-.card-status-top {
+.card-status-top,
+.card-status-start,
+.card-status-bottom {
+  --card-status-size: #{$card-status-size};
+  --card-status-offset: #{$card-status-offset};
   position: absolute;
-  inset-inline-start: $card-status-offset;
-  inset-inline-end: $card-status-offset;
-  top: $card-status-offset;
-  height: $card-status-size;
-  @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
+  inset: var(--card-status-offset);
+  pointer-events: none;
+  @include border-radius(var(--card-border-radius));
+}
+
+.card-status-top {
+  mask-image: linear-gradient(to bottom, #000 var(--card-status-size), transparent var(--card-status-size));
 }
 
 .card-status-start {
-  position: absolute;
-  inset-inline-start: $card-status-offset;
-  inset-inline-end: auto;
-  top: $card-status-offset;
-  bottom: $card-status-offset;
-  width: $card-status-size;
-  @include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius));
+  mask-image: linear-gradient(to right, #000 var(--card-status-size), transparent var(--card-status-size));
+
+  [dir='rtl'] & {
+    mask-image: linear-gradient(to left, #000 var(--card-status-size), transparent var(--card-status-size));
+  }
 }
 
 .card-status-bottom {
-  position: absolute;
-  inset-inline-start: $card-status-offset;
-  inset-inline-end: $card-status-offset;
-  top: initial;
-  bottom: $card-status-offset;
-  height: $card-status-size;
-  @include border-radius(0 0 var(--card-border-radius) var(--card-border-radius));
+  mask-image: linear-gradient(to top, #000 var(--card-status-size), transparent var(--card-status-size));
 }
 
 /**
@@ -535,6 +538,17 @@ Card code
  */
 .card-code {
   padding: 0;
+  overflow: hidden;
+
+  // The code block is a dark box, so it follows the card's corners: rounded at
+  // the card's top or bottom edge, square when another section sits next to it.
+  &:first-child {
+    @include border-top-radius(var(--card-border-radius));
+  }
+
+  &:last-child {
+    @include border-bottom-radius(var(--card-border-radius));
+  }
 
   .highlight {
     margin: 0;
@@ -544,6 +558,7 @@ Card code
   pre {
     margin: 0 !important;
     border: 0 !important;
+    @include border-radius(0);
   }
 }
 
@@ -612,7 +627,7 @@ Card list group
       }
 
       &.active {
-        color: $headings-color;
+        color: var(--heading-color, var(--emphasis-color));
         background: var(--card-bg, var(--bg-surface));
         border-bottom-color: transparent;
       }
@@ -686,8 +701,8 @@ Card list group
 Card note
 */
 .card-note {
-  --card-bg: #fff7dd;
-  --card-border-color: #fff1c9;
+  --card-bg: #{mix-color-css(var(--yellow), var(--bg-surface), 12%)};
+  --card-border-color: #{mix-color-css(var(--yellow), var(--bg-surface), 20%)};
 }
 
 /**
@@ -698,14 +713,16 @@ Card gradient
 // referenced in isolation by sass-true.
 @mixin card-gradient-background {
   background:
-    radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box,
-    linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
+    radial-gradient(ellipse at center, var(--card-bg) 0%, color-transparent(var(--card-bg), 0) 80%) border-box,
+    linear-gradient(var(--card-gradient-direction), color-transparent(var(--card-bg), var(--card-gradient-opacity)) 0%, var(--card-bg) 40%) border-box,
     linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box;
 }
 
 .card-gradient {
+  // scss-docs-start card-gradient-css-vars
   --card-gradient-direction: 180deg;
   --card-gradient-opacity: 86%;
+  // scss-docs-end card-gradient-css-vars
   --card-gradient: var(--primary), var(--primary);
 
   @include card-gradient-background();

package/scss/ui/_carousel.scss

@@ -69,5 +69,5 @@
   bottom: 0;
   height: 90%;
   background: $dark;
-  background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
+  background: linear-gradient(0deg, color-transparent(var(--dark), 0.9), color-transparent(var(--dark), 0));
 }

package/scss/ui/_chat.scss

@@ -1,9 +1,11 @@
 @use '../config' as *;
 
 .chat {
+  // scss-docs-start chat-css-vars
   --chat-bubbles-gap: #{$chat-bubbles-gap};
   --chat-bubble-padding: #{$chat-bubble-padding};
   --chat-bubble-title-margin-bottom: #{$chat-bubble-title-margin-bottom};
+  // scss-docs-end chat-css-vars
 }
 
 .chat-bubbles {