@gooddata/sdk-ui-dashboard 10.11.0-alpha.26 → 10.11.0-alpha.28

package/styles/css/main.css

@@ -10315,145 +10315,7 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   margin-top: 0.5em;
 }
 
-.bubble .arrow-position,
-.bubble .arrow-border,
-.bubble .arrow {
-  position: absolute;
-  z-index: 2;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 7px;
-}
-
-.bubble .arrow-position {
-  border-width: 0;
-}
-
-.bubble .arrow {
-  z-index: 4;
-  border-width: 6px;
-}
-
-.bubble.arrow-top-direction .arrow-position, .bubble.arrow-bottom-direction .arrow-position {
-  margin: 0 12px;
-}
-
-.bubble.arrow-top-direction .arrow, .bubble.arrow-bottom-direction .arrow {
-  left: -6px;
-}
-
-.bubble.arrow-top-direction .arrow-border, .bubble.arrow-bottom-direction .arrow-border {
-  top: 1px;
-  left: -7px;
-}
-
-.bubble.arrow-top-direction .helper, .bubble.arrow-bottom-direction .helper {
-  right: 0;
-  left: 0;
-  height: 8px;
-}
-
-.bubble.arrow-top-direction.arrow-tl .arrow-position, .bubble.arrow-top-direction.arrow-bl .arrow-position, .bubble.arrow-bottom-direction.arrow-tl .arrow-position, .bubble.arrow-bottom-direction.arrow-bl .arrow-position {
-  left: 0;
-}
-
-.bubble.arrow-top-direction.arrow-tr .arrow-position, .bubble.arrow-top-direction.arrow-br .arrow-position, .bubble.arrow-bottom-direction.arrow-tr .arrow-position, .bubble.arrow-bottom-direction.arrow-br .arrow-position {
-  right: 0;
-}
-
-.bubble.arrow-top-direction.arrow-tc .arrow-position, .bubble.arrow-top-direction.arrow-bc .arrow-position, .bubble.arrow-bottom-direction.arrow-tc .arrow-position, .bubble.arrow-bottom-direction.arrow-bc .arrow-position {
-  right: 0;
-  left: 0;
-  margin: 0 auto;
-}
-
-.bubble.arrow-top-direction .arrow-position {
-  top: -15px;
-}
-
-.bubble.arrow-top-direction .arrow {
-  top: 3px;
-}
-
-.bubble.arrow-top-direction .helper {
-  top: -8px;
-}
-
-.bubble.arrow-bottom-direction .arrow-position {
-  bottom: 0;
-}
-
-.bubble.arrow-bottom-direction .arrow-border {
-  top: 0;
-}
-
-.bubble.arrow-bottom-direction .helper {
-  bottom: -8px;
-}
-
-.bubble.arrow-left-direction .arrow-position, .bubble.arrow-right-direction .arrow-position {
-  margin: 10px 0;
-}
-
-.bubble.arrow-left-direction .arrow, .bubble.arrow-right-direction .arrow {
-  top: -5px;
-}
-
-.bubble.arrow-left-direction .arrow-border, .bubble.arrow-right-direction .arrow-border {
-  top: -6px;
-  left: 2px;
-}
-
-.bubble.arrow-left-direction .helper, .bubble.arrow-right-direction .helper {
-  top: 0;
-  bottom: 0;
-  width: 8px;
-}
-
-.bubble.arrow-left-direction.arrow-tl .arrow-position, .bubble.arrow-left-direction.arrow-tr .arrow-position, .bubble.arrow-right-direction.arrow-tl .arrow-position, .bubble.arrow-right-direction.arrow-tr .arrow-position {
-  top: 0;
-}
-
-.bubble.arrow-left-direction.arrow-bl .arrow-position, .bubble.arrow-left-direction.arrow-br .arrow-position, .bubble.arrow-right-direction.arrow-bl .arrow-position, .bubble.arrow-right-direction.arrow-br .arrow-position {
-  bottom: 3px;
-}
-
-.bubble.arrow-left-direction.arrow-cl .arrow-position, .bubble.arrow-left-direction.arrow-cr .arrow-position, .bubble.arrow-right-direction.arrow-cl .arrow-position, .bubble.arrow-right-direction.arrow-cr .arrow-position {
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-}
-
-.bubble.arrow-left-direction .arrow-position {
-  left: -16px;
-}
-
-.bubble.arrow-left-direction .arrow {
-  left: 4px;
-}
-
-.bubble.arrow-left-direction .helper {
-  left: -8px;
-}
-
-.bubble.arrow-right-direction .arrow-position {
-  right: 0;
-}
-
-.bubble.arrow-right-direction .arrow-border {
-  left: 0;
-}
-
-.bubble.arrow-right-direction .helper {
-  right: -8px;
-}
-
-.bubble.arrow-none .arrow-position {
-  display: none;
-}
-
-.bubble-primary {
+.bubble.bubble-primary {
   padding: 0;
   border-radius: 3px;
   border-style: solid;
@@ -10462,53 +10324,53 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   box-shadow: 0 1px 3px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
 }
 
-.bubble-primary .arrow-border {
+.bubble.bubble-primary .arrow-border {
   display: none;
 }
 
-.bubble-primary {
+.bubble.bubble-primary {
   color: var(--gd-tooltip-color, var(--gd-palette-complementary-0, #fff));
   background: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary .arrow-border,
-.bubble-primary .arrow {
+.bubble.bubble-primary .arrow-border,
+.bubble.bubble-primary .arrow {
   border-color: transparent;
 }
 
-.bubble-primary.arrow-bottom-direction .arrow-border {
+.bubble.bubble-primary.arrow-bottom-direction .arrow-border {
   border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary.arrow-bottom-direction .arrow {
+.bubble.bubble-primary.arrow-bottom-direction .arrow {
   border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary.arrow-top-direction .arrow-border {
+.bubble.bubble-primary.arrow-top-direction .arrow-border {
   border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary.arrow-top-direction .arrow {
+.bubble.bubble-primary.arrow-top-direction .arrow {
   border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary.arrow-left-direction .arrow-border {
+.bubble.bubble-primary.arrow-left-direction .arrow-border {
   border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary.arrow-left-direction .arrow {
+.bubble.bubble-primary.arrow-left-direction .arrow {
   border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary.arrow-right-direction .arrow-border {
+.bubble.bubble-primary.arrow-right-direction .arrow-border {
   border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-primary.arrow-right-direction .arrow {
+.bubble.bubble-primary.arrow-right-direction .arrow {
   border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-secondary {
+.bubble.bubble-secondary {
   padding: 0;
   border-radius: 3px;
   border-style: solid;
@@ -10517,53 +10379,53 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   box-shadow: 0 1px 3px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
 }
 
-.bubble-secondary .arrow-border {
+.bubble.bubble-secondary .arrow-border {
   display: none;
 }
 
-.bubble-secondary {
+.bubble.bubble-secondary {
   color: var(--gd-palette-complementary-0, #fff);
   background: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary .arrow-border,
-.bubble-secondary .arrow {
+.bubble.bubble-secondary .arrow-border,
+.bubble.bubble-secondary .arrow {
   border-color: transparent;
 }
 
-.bubble-secondary.arrow-bottom-direction .arrow-border {
+.bubble.bubble-secondary.arrow-bottom-direction .arrow-border {
   border-top-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary.arrow-bottom-direction .arrow {
+.bubble.bubble-secondary.arrow-bottom-direction .arrow {
   border-top-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary.arrow-top-direction .arrow-border {
+.bubble.bubble-secondary.arrow-top-direction .arrow-border {
   border-bottom-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary.arrow-top-direction .arrow {
+.bubble.bubble-secondary.arrow-top-direction .arrow {
   border-bottom-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary.arrow-left-direction .arrow-border {
+.bubble.bubble-secondary.arrow-left-direction .arrow-border {
   border-right-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary.arrow-left-direction .arrow {
+.bubble.bubble-secondary.arrow-left-direction .arrow {
   border-right-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary.arrow-right-direction .arrow-border {
+.bubble.bubble-secondary.arrow-right-direction .arrow-border {
   border-left-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-secondary.arrow-right-direction .arrow {
+.bubble.bubble-secondary.arrow-right-direction .arrow {
   border-left-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
 }
 
-.bubble-dark {
+.bubble.bubble-dark {
   padding: 0;
   border-radius: 3px;
   border-style: solid;
@@ -10572,53 +10434,53 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   box-shadow: 0 1px 3px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
 }
 
-.bubble-dark .arrow-border {
+.bubble.bubble-dark .arrow-border {
   display: none;
 }
 
-.bubble-dark {
+.bubble.bubble-dark {
   color: var(--gd-tooltip-color, var(--gd-palette-complementary-0, #fff));
   background: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark .arrow-border,
-.bubble-dark .arrow {
+.bubble.bubble-dark .arrow-border,
+.bubble.bubble-dark .arrow {
   border-color: transparent;
 }
 
-.bubble-dark.arrow-bottom-direction .arrow-border {
+.bubble.bubble-dark.arrow-bottom-direction .arrow-border {
   border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark.arrow-bottom-direction .arrow {
+.bubble.bubble-dark.arrow-bottom-direction .arrow {
   border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark.arrow-top-direction .arrow-border {
+.bubble.bubble-dark.arrow-top-direction .arrow-border {
   border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark.arrow-top-direction .arrow {
+.bubble.bubble-dark.arrow-top-direction .arrow {
   border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark.arrow-left-direction .arrow-border {
+.bubble.bubble-dark.arrow-left-direction .arrow-border {
   border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark.arrow-left-direction .arrow {
+.bubble.bubble-dark.arrow-left-direction .arrow {
   border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark.arrow-right-direction .arrow-border {
+.bubble.bubble-dark.arrow-right-direction .arrow-border {
   border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-dark.arrow-right-direction .arrow {
+.bubble.bubble-dark.arrow-right-direction .arrow {
   border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8, rgba(70, 78, 86, 0.95)));
 }
 
-.bubble-light {
+.bubble.bubble-light {
   padding: 0;
   border-radius: 3px;
   border-style: solid;
@@ -10627,49 +10489,49 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   box-shadow: 0 1px 3px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
 }
 
-.bubble-light {
+.bubble.bubble-light {
   color: #000;
   background: rgba(255, 255, 255, 0.95);
 }
 
-.bubble-light .arrow-border,
-.bubble-light .arrow {
+.bubble.bubble-light .arrow-border,
+.bubble.bubble-light .arrow {
   border-color: transparent;
 }
 
-.bubble-light.arrow-bottom-direction .arrow-border {
+.bubble.bubble-light.arrow-bottom-direction .arrow-border {
   border-top-color: var(--gd-palette-complementary-3, #c9d5e0);
 }
 
-.bubble-light.arrow-bottom-direction .arrow {
+.bubble.bubble-light.arrow-bottom-direction .arrow {
   border-top-color: rgba(255, 255, 255, 0.95);
 }
 
-.bubble-light.arrow-top-direction .arrow-border {
+.bubble.bubble-light.arrow-top-direction .arrow-border {
   border-bottom-color: var(--gd-palette-complementary-3, #c9d5e0);
 }
 
-.bubble-light.arrow-top-direction .arrow {
+.bubble.bubble-light.arrow-top-direction .arrow {
   border-bottom-color: rgba(255, 255, 255, 0.95);
 }
 
-.bubble-light.arrow-left-direction .arrow-border {
+.bubble.bubble-light.arrow-left-direction .arrow-border {
   border-right-color: var(--gd-palette-complementary-3, #c9d5e0);
 }
 
-.bubble-light.arrow-left-direction .arrow {
+.bubble.bubble-light.arrow-left-direction .arrow {
   border-right-color: rgba(255, 255, 255, 0.95);
 }
 
-.bubble-light.arrow-right-direction .arrow-border {
+.bubble.bubble-light.arrow-right-direction .arrow-border {
   border-left-color: var(--gd-palette-complementary-3, #c9d5e0);
 }
 
-.bubble-light.arrow-right-direction .arrow {
+.bubble.bubble-light.arrow-right-direction .arrow {
   border-left-color: rgba(255, 255, 255, 0.95);
 }
 
-.bubble-warning {
+.bubble.bubble-warning {
   padding: 0;
   border-radius: 3px;
   border-style: solid;
@@ -10678,53 +10540,53 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   box-shadow: 0 1px 3px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
 }
 
-.bubble-warning .arrow-border {
+.bubble.bubble-warning .arrow-border {
   display: none;
 }
 
-.bubble-warning {
+.bubble.bubble-warning {
   color: var(--gd-palette-complementary-0, #fff);
   background: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning .arrow-border,
-.bubble-warning .arrow {
+.bubble.bubble-warning .arrow-border,
+.bubble.bubble-warning .arrow {
   border-color: transparent;
 }
 
-.bubble-warning.arrow-bottom-direction .arrow-border {
+.bubble.bubble-warning.arrow-bottom-direction .arrow-border {
   border-top-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning.arrow-bottom-direction .arrow {
+.bubble.bubble-warning.arrow-bottom-direction .arrow {
   border-top-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning.arrow-top-direction .arrow-border {
+.bubble.bubble-warning.arrow-top-direction .arrow-border {
   border-bottom-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning.arrow-top-direction .arrow {
+.bubble.bubble-warning.arrow-top-direction .arrow {
   border-bottom-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning.arrow-left-direction .arrow-border {
+.bubble.bubble-warning.arrow-left-direction .arrow-border {
   border-right-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning.arrow-left-direction .arrow {
+.bubble.bubble-warning.arrow-left-direction .arrow {
   border-right-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning.arrow-right-direction .arrow-border {
+.bubble.bubble-warning.arrow-right-direction .arrow-border {
   border-left-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-warning.arrow-right-direction .arrow {
+.bubble.bubble-warning.arrow-right-direction .arrow {
   border-left-color: var(--gd-palette-primary-base-t10, rgba(241, 134, 0, 0.9));
 }
 
-.bubble-negative {
+.bubble.bubble-negative {
   padding: 0;
   border-radius: 3px;
   border-style: solid;
@@ -10733,52 +10595,190 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   box-shadow: 0 1px 3px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
 }
 
-.bubble-negative .arrow-border {
+.bubble.bubble-negative .arrow-border {
   display: none;
 }
 
-.bubble-negative {
+.bubble.bubble-negative {
   color: var(--gd-palette-complementary-0, #fff);
   background: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative .arrow-border,
-.bubble-negative .arrow {
+.bubble.bubble-negative .arrow-border,
+.bubble.bubble-negative .arrow {
   border-color: transparent;
 }
 
-.bubble-negative.arrow-bottom-direction .arrow-border {
+.bubble.bubble-negative.arrow-bottom-direction .arrow-border {
   border-top-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative.arrow-bottom-direction .arrow {
+.bubble.bubble-negative.arrow-bottom-direction .arrow {
   border-top-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative.arrow-top-direction .arrow-border {
+.bubble.bubble-negative.arrow-top-direction .arrow-border {
   border-bottom-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative.arrow-top-direction .arrow {
+.bubble.bubble-negative.arrow-top-direction .arrow {
   border-bottom-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative.arrow-left-direction .arrow-border {
+.bubble.bubble-negative.arrow-left-direction .arrow-border {
   border-right-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative.arrow-left-direction .arrow {
+.bubble.bubble-negative.arrow-left-direction .arrow {
   border-right-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative.arrow-right-direction .arrow-border {
+.bubble.bubble-negative.arrow-right-direction .arrow-border {
   border-left-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
-.bubble-negative.arrow-right-direction .arrow {
+.bubble.bubble-negative.arrow-right-direction .arrow {
   border-left-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
 }
 
+.bubble .arrow-position,
+.bubble .arrow-border,
+.bubble .arrow {
+  position: absolute;
+  z-index: 2;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 7px;
+}
+
+.bubble .arrow-position {
+  border-width: 0;
+}
+
+.bubble .arrow {
+  z-index: 4;
+  border-width: 6px;
+}
+
+.bubble.arrow-top-direction .arrow-position, .bubble.arrow-bottom-direction .arrow-position {
+  margin: 0 12px;
+}
+
+.bubble.arrow-top-direction .arrow, .bubble.arrow-bottom-direction .arrow {
+  left: -6px;
+}
+
+.bubble.arrow-top-direction .arrow-border, .bubble.arrow-bottom-direction .arrow-border {
+  top: 1px;
+  left: -7px;
+}
+
+.bubble.arrow-top-direction .helper, .bubble.arrow-bottom-direction .helper {
+  right: 0;
+  left: 0;
+  height: 8px;
+}
+
+.bubble.arrow-top-direction.arrow-tl .arrow-position, .bubble.arrow-top-direction.arrow-bl .arrow-position, .bubble.arrow-bottom-direction.arrow-tl .arrow-position, .bubble.arrow-bottom-direction.arrow-bl .arrow-position {
+  left: 0;
+}
+
+.bubble.arrow-top-direction.arrow-tr .arrow-position, .bubble.arrow-top-direction.arrow-br .arrow-position, .bubble.arrow-bottom-direction.arrow-tr .arrow-position, .bubble.arrow-bottom-direction.arrow-br .arrow-position {
+  right: 0;
+}
+
+.bubble.arrow-top-direction.arrow-tc .arrow-position, .bubble.arrow-top-direction.arrow-bc .arrow-position, .bubble.arrow-bottom-direction.arrow-tc .arrow-position, .bubble.arrow-bottom-direction.arrow-bc .arrow-position {
+  right: 0;
+  left: 0;
+  margin: 0 auto;
+}
+
+.bubble.arrow-top-direction .arrow-position {
+  top: -15px;
+}
+
+.bubble.arrow-top-direction .arrow {
+  top: 3px;
+}
+
+.bubble.arrow-top-direction .helper {
+  top: -8px;
+}
+
+.bubble.arrow-bottom-direction .arrow-position {
+  bottom: 0;
+}
+
+.bubble.arrow-bottom-direction .arrow-border {
+  top: 0;
+}
+
+.bubble.arrow-bottom-direction .helper {
+  bottom: -8px;
+}
+
+.bubble.arrow-left-direction .arrow-position, .bubble.arrow-right-direction .arrow-position {
+  margin: 10px 0;
+}
+
+.bubble.arrow-left-direction .arrow, .bubble.arrow-right-direction .arrow {
+  top: -5px;
+}
+
+.bubble.arrow-left-direction .arrow-border, .bubble.arrow-right-direction .arrow-border {
+  top: -6px;
+  left: 2px;
+}
+
+.bubble.arrow-left-direction .helper, .bubble.arrow-right-direction .helper {
+  top: 0;
+  bottom: 0;
+  width: 8px;
+}
+
+.bubble.arrow-left-direction.arrow-tl .arrow-position, .bubble.arrow-left-direction.arrow-tr .arrow-position, .bubble.arrow-right-direction.arrow-tl .arrow-position, .bubble.arrow-right-direction.arrow-tr .arrow-position {
+  top: 0;
+}
+
+.bubble.arrow-left-direction.arrow-bl .arrow-position, .bubble.arrow-left-direction.arrow-br .arrow-position, .bubble.arrow-right-direction.arrow-bl .arrow-position, .bubble.arrow-right-direction.arrow-br .arrow-position {
+  bottom: 3px;
+}
+
+.bubble.arrow-left-direction.arrow-cl .arrow-position, .bubble.arrow-left-direction.arrow-cr .arrow-position, .bubble.arrow-right-direction.arrow-cl .arrow-position, .bubble.arrow-right-direction.arrow-cr .arrow-position {
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+
+.bubble.arrow-left-direction .arrow-position {
+  left: -16px;
+}
+
+.bubble.arrow-left-direction .arrow {
+  left: 4px;
+}
+
+.bubble.arrow-left-direction .helper {
+  left: -8px;
+}
+
+.bubble.arrow-right-direction .arrow-position {
+  right: 0;
+}
+
+.bubble.arrow-right-direction .arrow-border {
+  left: 0;
+}
+
+.bubble.arrow-right-direction .helper {
+  right: -8px;
+}
+
+.bubble.arrow-none .arrow-position {
+  display: none;
+}
+
 .gecko .bubble-chart,
 .chrome .bubble-chart,
 .safari .bubble-chart {
@@ -24686,7 +24686,8 @@ div.gd-empty-item-bubble {
   padding: 10px;
 }
 
-.gd-visualization-switcher-toolbar-top {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light {
+  position: initial;
   width: 189px;
   height: 40px;
   padding: 6px 8px;
@@ -24698,20 +24699,20 @@ div.gd-empty-item-bubble {
   background-color: white;
   line-height: 0;
 }
-.gd-visualization-switcher-toolbar-top .gd-bubble-trigger {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .gd-bubble-trigger {
   display: inline-block;
 }
-.gd-visualization-switcher-toolbar-top .left-section {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .left-section {
   padding: 4px;
   flex: 0 1 auto;
 }
-.gd-visualization-switcher-toolbar-top .vertical-divider {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .vertical-divider {
   flex: 0 0 1px;
   width: 1px;
   height: 28px;
   background-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-visualization-switcher-toolbar-top .middle-section {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .middle-section {
   flex: 1 0 auto;
   display: flex;
   justify-content: space-between;
@@ -24719,66 +24720,67 @@ div.gd-empty-item-bubble {
   color: var(--gd-palette-complementary-7, #6d7680);
   font-size: 14px;
 }
-.gd-visualization-switcher-toolbar-top .status {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .status {
   padding: 2px 0;
   line-height: 21px;
 }
-.gd-visualization-switcher-toolbar-top .navigate-button {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .navigate-button {
   display: flex;
   padding: 4px;
   justify-content: center;
   align-items: center;
 }
-.gd-visualization-switcher-toolbar-top .right-section {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .right-section {
   display: flex;
   padding: 4px;
   justify-content: center;
   align-items: center;
   gap: 10px;
 }
-.gd-visualization-switcher-toolbar-top .gd-trash-icon:hover path {
+.gd-visualization-switcher-toolbar-top.bubble.bubble-light .gd-trash-icon:hover path {
   fill: var(--gd-palette-error-base, #e54d42);
 }
 
-.gd-visualization-switcher-toolbar-bottom {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light {
+  position: initial;
   background-color: white;
 }
-.gd-visualization-switcher-toolbar-bottom .configuration-panel-header {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .configuration-panel-header {
   height: 39px;
   position: relative;
 }
-.gd-visualization-switcher-toolbar-bottom .insight-configuration-content {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .insight-configuration-content {
   padding: 10px 0 5px 0;
 }
-.gd-visualization-switcher-toolbar-bottom .no-visualizations-text {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .no-visualizations-text {
   margin-left: 15px;
   padding: 5px 0;
   font-size: 12px;
   line-height: 21px;
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
-.gd-visualization-switcher-toolbar-bottom .visualizations-list {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .visualizations-list {
   max-height: 253px;
   overflow-y: auto;
 }
-.gd-visualization-switcher-toolbar-bottom .horizontal-divider {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .horizontal-divider {
   width: 100%;
   text-align: center;
   padding: 5px 15px;
 }
-.gd-visualization-switcher-toolbar-bottom .horizontal-divider .horizontal-divider-line {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .horizontal-divider .horizontal-divider-line {
   height: 1px;
   background-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-visualization-switcher-toolbar-bottom .gd-add-visualization {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .gd-add-visualization {
   margin-left: 5px;
   font-size: 12px;
 }
-.gd-visualization-switcher-toolbar-bottom .open-visualizations {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .open-visualizations {
   padding-top: 5px;
   padding-bottom: 15px;
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -24786,30 +24788,30 @@ div.gd-empty-item-bubble {
   height: 40px;
   cursor: pointer;
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item:hover {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item:hover {
   background-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item:hover .visualization-title,
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item:hover .gd-vis-type {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item:hover .visualization-title,
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item:hover .gd-vis-type {
   color: var(--gd-palette-complementary-9, #000);
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item.is-selected .visualization-title,
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item.is-selected .gd-vis-type {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item.is-selected .visualization-title,
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item.is-selected .gd-vis-type {
   font-weight: 700;
   color: var(--gd-palette-primary-0, #14b2e2);
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item.is-selected:hover {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item.is-selected:hover {
   background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item .visualization-title {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item .visualization-title {
   display: flex;
   align-items: center;
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item .gd-visualizations-list-item-content-name {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item .gd-visualizations-list-item-content-name {
   white-space: nowrap;
   max-width: 150px;
 }
-.gd-visualization-switcher-toolbar-bottom .switcher-visualizations-list-item .gd-visualizations-list-item-content-name span {
+.gd-visualization-switcher-toolbar-bottom.bubble.bubble-light .switcher-visualizations-list-item .gd-visualizations-list-item-content-name span {
   display: inline-block;
   width: 100%;
   white-space: nowrap;