@gooddata/sdk-ui-ext 10.18.0-alpha.9 → 10.18.0-beta.1

package/styles/css/main.css

@@ -731,50 +731,880 @@
   background: var(--gd-palette-complementary-0, #fff);
 }
 
-.gd-ui-ext-notification-details-dialog {
-  width: 245px;
-  box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
+/* allow vendor prefixes and disable max length */
+/* allow vendor prefixes and disable max length */
+/* ==========================================================================
+   Variables, mixins, silent classes etc.
+   ========================================================================== */
+/* ==========================================================================
+   Bubble
+   ========================================================================== */
+.bubbleArrowShift {
+  width: 7px;
+  height: 12px;
+}
+
+.inlineBubbleHelp {
+  display: inline-block;
+  font: 14px/1 "Indigo", sans-serif;
+  vertical-align: middle;
+  color: var(--gd-palette-complementary-6-from-theme, #bbb);
+}
+.inlineBubbleHelp::before {
+  content: "\e60b";
+}
+.inlineBubbleHelp, .inlineBubbleHelp:hover, .inlineBubbleHelp:focus, .inlineBubbleHelp:active {
+  text-decoration: none;
+}
+.inlineBubbleHelp:hover, .inlineBubbleHelp:focus, .inlineBubbleHelp:active {
+  color: #999;
+  cursor: help;
+}
+
+.bubble {
+  position: absolute;
+  max-width: 300px;
+  -moz-transition-property: opacity;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -moz-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -moz-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+.bubble.bubble-small {
+  max-width: 200px;
+}
+.bubble.gd-bubble {
+  position: relative;
+}
+.bubble.isActive {
+  opacity: 1;
+}
+.bubble .helper {
+  position: absolute;
+  background: white;
+  opacity: 0.01;
+}
+.bubble .bubble-content {
+  position: relative;
+  overflow: visible;
+  padding: 7px 10px;
   border-radius: 3px;
-  border: 1px solid var(--gd-palette-complementary-3);
-  background-color: var(--gd-palette-complementary-0);
-  font-family: var(--gd-font-family);
+  pointer-events: none;
 }
-.gd-ui-ext-notification-details-dialog__header {
+.bubble .bubble-content .content {
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  word-wrap: break-word;
+  word-break: break-word;
+  pointer-events: auto;
+}
+.bubble .bubble-content .content a {
+  color: var(--gd-palette-complementary-0, #fff);
+  opacity: 0.8;
+  text-decoration: underline;
+  -moz-transition-property: all;
+  -webkit-transition-property: all;
+  transition-property: all;
+  -moz-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+.bubble .bubble-content .content a:hover {
+  opacity: 1;
+}
+.bubble .bubble-content .content,
+.bubble .bubble-content .content p,
+.bubble .bubble-content .content a {
+  font: 400 12px/18px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+}
+.bubble .bubble-content .content p {
+  margin: 0;
+}
+.bubble .bubble-content .content p + p {
+  margin-top: 0.5em;
+}
+.bubble.bubble-primary {
+  padding: 0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 0;
+  border-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+  box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+}
+.bubble.bubble-primary .arrow-border {
+  display: none;
+}
+.bubble.bubble-primary {
+  color: var(--gd-tooltip-color, var(--gd-palette-complementary-0, #fff));
+  background: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary .arrow-border,
+.bubble.bubble-primary .arrow {
+  border-color: transparent;
+}
+.bubble.bubble-primary.arrow-bottom-direction .arrow-border {
+  border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary.arrow-bottom-direction .arrow {
+  border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary.arrow-top-direction .arrow-border {
+  border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary.arrow-top-direction .arrow {
+  border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary.arrow-left-direction .arrow-border {
+  border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary.arrow-left-direction .arrow {
+  border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary.arrow-right-direction .arrow-border {
+  border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-primary.arrow-right-direction .arrow {
+  border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-secondary {
+  padding: 0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 0;
+  border-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+  box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+}
+.bubble.bubble-secondary .arrow-border {
+  display: none;
+}
+.bubble.bubble-secondary {
+  color: var(--gd-palette-complementary-0, #fff);
+  background: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary .arrow-border,
+.bubble.bubble-secondary .arrow {
+  border-color: transparent;
+}
+.bubble.bubble-secondary.arrow-bottom-direction .arrow-border {
+  border-top-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary.arrow-bottom-direction .arrow {
+  border-top-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary.arrow-top-direction .arrow-border {
+  border-bottom-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary.arrow-top-direction .arrow {
+  border-bottom-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary.arrow-left-direction .arrow-border {
+  border-right-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary.arrow-left-direction .arrow {
+  border-right-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary.arrow-right-direction .arrow-border {
+  border-left-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-secondary.arrow-right-direction .arrow {
+  border-left-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
+}
+.bubble.bubble-dark {
+  padding: 0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 0;
+  border-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+  box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+}
+.bubble.bubble-dark .arrow-border {
+  display: none;
+}
+.bubble.bubble-dark {
+  color: var(--gd-tooltip-color, var(--gd-palette-complementary-0, #fff));
+  background: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark .arrow-border,
+.bubble.bubble-dark .arrow {
+  border-color: transparent;
+}
+.bubble.bubble-dark.arrow-bottom-direction .arrow-border {
+  border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark.arrow-bottom-direction .arrow {
+  border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark.arrow-top-direction .arrow-border {
+  border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark.arrow-top-direction .arrow {
+  border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark.arrow-left-direction .arrow-border {
+  border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark.arrow-left-direction .arrow {
+  border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark.arrow-right-direction .arrow-border {
+  border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-dark.arrow-right-direction .arrow {
+  border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
+}
+.bubble.bubble-light {
+  padding: 0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
+  box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+}
+.bubble.bubble-light {
+  color: #000;
+  background: rgba(255, 255, 255, 0.95);
+}
+.bubble.bubble-light .arrow-border,
+.bubble.bubble-light .arrow {
+  border-color: transparent;
+}
+.bubble.bubble-light.arrow-bottom-direction .arrow-border {
+  border-top-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
+}
+.bubble.bubble-light.arrow-bottom-direction .arrow {
+  border-top-color: rgba(255, 255, 255, 0.95);
+}
+.bubble.bubble-light.arrow-top-direction .arrow-border {
+  border-bottom-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
+}
+.bubble.bubble-light.arrow-top-direction .arrow {
+  border-bottom-color: rgba(255, 255, 255, 0.95);
+}
+.bubble.bubble-light.arrow-left-direction .arrow-border {
+  border-right-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
+}
+.bubble.bubble-light.arrow-left-direction .arrow {
+  border-right-color: rgba(255, 255, 255, 0.95);
+}
+.bubble.bubble-light.arrow-right-direction .arrow-border {
+  border-left-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
+}
+.bubble.bubble-light.arrow-right-direction .arrow {
+  border-left-color: rgba(255, 255, 255, 0.95);
+}
+.bubble.bubble-warning {
+  padding: 0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 0;
+  border-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+  box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+}
+.bubble.bubble-warning .arrow-border {
+  display: none;
+}
+.bubble.bubble-warning {
+  color: var(--gd-palette-complementary-0, #fff);
+  background: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning .arrow-border,
+.bubble.bubble-warning .arrow {
+  border-color: transparent;
+}
+.bubble.bubble-warning.arrow-bottom-direction .arrow-border {
+  border-top-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning.arrow-bottom-direction .arrow {
+  border-top-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning.arrow-top-direction .arrow-border {
+  border-bottom-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning.arrow-top-direction .arrow {
+  border-bottom-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning.arrow-left-direction .arrow-border {
+  border-right-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning.arrow-left-direction .arrow {
+  border-right-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning.arrow-right-direction .arrow-border {
+  border-left-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-warning.arrow-right-direction .arrow {
+  border-left-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
+}
+.bubble.bubble-negative {
+  padding: 0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 0;
+  border-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+  box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+}
+.bubble.bubble-negative .arrow-border {
+  display: none;
+}
+.bubble.bubble-negative {
+  color: var(--gd-palette-complementary-0, #fff);
+  background: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.bubble.bubble-negative .arrow-border,
+.bubble.bubble-negative .arrow {
+  border-color: transparent;
+}
+.bubble.bubble-negative.arrow-bottom-direction .arrow-border {
+  border-top-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.bubble.bubble-negative.arrow-bottom-direction .arrow {
+  border-top-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.bubble.bubble-negative.arrow-top-direction .arrow-border {
+  border-bottom-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.bubble.bubble-negative.arrow-top-direction .arrow {
+  border-bottom-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.bubble.bubble-negative.arrow-left-direction .arrow-border {
+  border-right-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.bubble.bubble-negative.arrow-left-direction .arrow {
+  border-right-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.bubble.bubble-negative.arrow-right-direction .arrow-border {
+  border-left-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
+}
+.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 {
+  opacity: 0;
+}
+
+.gecko .bubble-anim,
+.chrome .bubble-anim,
+.safari .bubble-anim {
+  opacity: 1;
+  -moz-transition-property: opacity, transform;
+  -webkit-transition-property: opacity, transform;
+  transition-property: opacity, transform;
+  -moz-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -moz-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+
+.gecko .bubble-anim.yui3-overlay-hidden,
+.chrome .bubble-anim.yui3-overlay-hidden,
+.safari .bubble-anim.yui3-overlay-hidden {
+  visibility: visible !important;
+  -moz-transition-duration: 0s;
+  opacity: 0;
+}
+
+.bubble-none {
+  display: none;
+}
+
+.gd-dropdown.overlay {
+  padding: 0;
+}
+
+.overlay-wrapper {
+  z-index: 5001;
+}
+
+.overlay {
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-weight: 400;
+  line-height: 1.4rem;
+  color: var(--gd-palette-complementary-8, #464e56);
+  font-size: 14px;
+  position: relative;
+  padding: 0.1px;
+  border-radius: 3px;
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  background-color: var(--gd-palette-complementary-0, #fff);
+  box-shadow: 0 1px 20px var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.2));
+}
+@media only screen and (max-width: 640px) {
+  .overlay {
+    border-radius: 0;
+  }
+}
+
+.gd-overlay-content {
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  line-height: 1.5;
+}
+.gd-overlay-content button,
+.gd-overlay-content input,
+.gd-overlay-content optgroup,
+.gd-overlay-content select,
+.gd-overlay-content textarea {
+  outline: 0;
+}
+.gd-overlay-content *,
+.gd-overlay-content *::before,
+.gd-overlay-content *::after {
+  box-sizing: border-box;
+}
+.gd-overlay-content .invisible {
+  visibility: hidden;
+}
+
+.gd-error-overlay-content .modalityPlugin-mask-visible {
+  z-index: 10001;
+  opacity: 0.95;
+}
+
+.gd-error-overlay {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  background: var(--gd-palette-complementary-2);
-  height: 35px;
+  text-align: center;
 }
-.gd-ui-ext-notification-details-dialog__header-title {
-  color: var(--gd-palette-complementary-6);
-  font-size: 11px;
-  font-style: normal;
+.gd-error-overlay .gd-error-overlay-icon {
+  margin-bottom: 20px;
+}
+.gd-error-overlay h2 {
+  margin-bottom: 10px;
+}
+.gd-error-overlay .gd-error-overlay-text {
+  line-height: 23px;
+  color: var(--gd-palette-complementary-8, #464e56);
+  font-size: 14px;
+}
+.gd-error-overlay .gd-error-overlay-button {
+  margin-top: 20px;
+}
+
+.gd-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+}
+.gd-tabs.small .gd-tab {
+  padding: 3px 6px;
+  line-height: 14px;
+  margin-right: 14px;
+  font-size: 12px;
+}
+
+.gd-tab {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: flex-end;
+  margin: 0 20px -1px 0;
+  padding: 3px 0;
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--gd-palette-complementary-7, #6d7680);
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  font-size: 14px;
+  text-align: center;
+}
+.gd-tab:hover {
+  color: var(--gd-palette-complementary-8-from-theme, var(--gd-palette-complementary-9, #000));
+  border-bottom: 3px solid var(--gd-palette-complementary-3, #dde4eb);
+}
+.gd-tab.is-active {
+  color: var(--gd-palette-complementary-9, #000);
+  border-bottom: 3px solid var(--gd-palette-primary-base, #14b2e2);
   font-weight: 700;
-  line-height: normal;
-  text-transform: uppercase;
 }
-.gd-ui-ext-notification-details-dialog__header-close-button {
+.gd-tab:hover, .gd-tab.is-active {
+  text-decoration: none;
+}
+.gd-tab span {
+  overflow: hidden;
+}
+
+.gd-ui-kit-icon--color-primary {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-icon--color-warning {
+  --gd-icon-fill-color: var(--gd-palette-warning-base);
+}
+.gd-ui-kit-icon--color-error {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-icon--color-complementary-0 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-icon--color-complementary-1 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-1);
+}
+.gd-ui-kit-icon--color-complementary-2 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-icon--color-complementary-3 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-3);
+}
+.gd-ui-kit-icon--color-complementary-4 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-icon--color-complementary-5 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-icon--color-complementary-6 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-icon--color-complementary-7 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-icon--color-complementary-8 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-icon--color-complementary-9 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-9);
+}
+.gd-ui-kit-icon__fill {
+  transition: var(--gd-transition-all);
+  fill: var(--gd-icon-fill-color);
+}
+
+.gd-ui-kit-button {
+  font-family: var(--gd-font-family);
+  gap: var(--gd-spacing-5px);
+  border-radius: var(--gd-button-borderRadius);
+  transition: var(--gd-transition-all);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
+  border-style: solid;
+  border-width: 1px;
+  /**
+   * Size
+   */
+  /**
+   * Variant
+   */
+}
+.gd-ui-kit-button:disabled {
+  cursor: default;
 }
-.gd-ui-ext-notification-details-dialog__header-close-button:hover {
-  opacity: 0.7;
+.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout):active .gd-ui-kit-button__text {
+  padding-top: 1px;
 }
-.gd-ui-ext-notification-details-dialog__content {
-  padding: 10px;
+.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout):active .gd-ui-kit-button__icon {
+  padding-top: 1px;
 }
-.gd-ui-ext-notification-details-dialog__footer {
-  border-top: 1px solid var(--gd-palette-complementary-3);
-  padding: 10px;
+.gd-ui-kit-button__text {
+  transition: var(--gd-transition-all);
+}
+.gd-ui-kit-button__icon {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  transition: var(--gd-transition-all);
+}
+.gd-ui-kit-button--isLoading .gd-ui-kit-button__icon {
+  animation: rotate 1s infinite steps(30);
+}
+.gd-ui-kit-button--size-small {
+  height: var(--gd-button-S);
+  padding: var(--gd-spacing-6px) var(--gd-spacing-10px);
+  font-size: 12px;
+  line-height: 14px;
+}
+.gd-ui-kit-button--size-small.gd-ui-kit-button--iconPosition-left {
+  padding-left: var(--gd-spacing-7px);
+}
+.gd-ui-kit-button--size-small.gd-ui-kit-button--iconPosition-right {
+  padding-right: var(--gd-spacing-7px);
+}
+.gd-ui-kit-button--size-medium {
+  height: var(--gd-button-M);
+  padding: var(--gd-spacing-6px) var(--gd-spacing-15px);
+  font-size: 14px;
+  line-height: 16px;
+}
+.gd-ui-kit-button--size-medium.gd-ui-kit-button--iconPosition-left {
+  padding-left: var(--gd-spacing-10px);
+}
+.gd-ui-kit-button--size-medium.gd-ui-kit-button--iconPosition-right {
+  padding-right: var(--gd-spacing-10px);
+}
+.gd-ui-kit-button--size-large {
+  height: var(--gd-button-L);
+  padding: var(--gd-spacing-6px) var(--gd-spacing-20px);
+  font-size: 16px;
+  line-height: 18px;
+}
+.gd-ui-kit-button--size-large.gd-ui-kit-button--iconPosition-left {
+  padding-left: var(--gd-spacing-15px);
+}
+.gd-ui-kit-button--size-large.gd-ui-kit-button--iconPosition-right {
+  padding-right: var(--gd-spacing-15px);
+}
+.gd-ui-kit-button--variant-primary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  color: var(--gd-palette-complementary-0);
+  background-color: var(--gd-palette-primary-base);
+  border-color: var(--gd-palette-complementary-9-t90);
+  font-weight: 700;
+}
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):focus {
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):hover {
+  background-color: var(--gd-palette-primary-base-d06);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):active {
+  background: var(--gd-palette-primary-base-d12);
+  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-primary:disabled {
+  background-color: var(--gd-palette-primary-disabled);
+  box-shadow: none;
+  border-color: transparent;
+}
+.gd-ui-kit-button--variant-secondary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+  color: var(--gd-palette-complementary-7);
+  border-color: var(--gd-palette-complementary-4);
+  background-color: var(--gd-palette-complementary-0);
+  font-weight: 400;
+}
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):focus {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+  background: var(--gd-palette-complementary-1);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40) inset;
+}
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+  border-color: var(--gd-palette-complementary-5);
+  background: var(--gd-palette-complementary-0);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40) inset;
+}
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+  border-color: var(--gd-palette-complementary-5);
+  background: var(--gd-palette-complementary-3);
+  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-secondary:disabled {
+  color: var(--gd-palette-complementary-5);
+  border-color: var(--gd-palette-complementary-4);
+  background: var(--gd-palette-complementary-0);
+  box-shadow: none;
+}
+.gd-ui-kit-button--variant-tertiary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+  color: var(--gd-palette-complementary-7);
+  text-decoration: underline;
+  background-color: transparent;
+  border-color: transparent;
+}
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):focus {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-button--variant-tertiary:disabled {
+  color: var(--gd-palette-complementary-5);
+  text-decoration: none;
+}
+.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-small, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-medium, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-large {
+  padding: 0;
+  height: auto;
+}
+.gd-ui-kit-button--variant-popout {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-primary-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):focus {
+  text-decoration: underline;
+}
+.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):hover {
+  color: var(--gd-palette-complementary-8);
+  text-decoration: underline;
+}
+.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):active {
+  color: var(--gd-palette-primary-base);
+  text-decoration: underline;
+}
+.gd-ui-kit-button--variant-popout:disabled {
+  color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-small, .gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-medium, .gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-large {
+  padding: 0;
+  height: auto;
+}
+.gd-ui-kit-button--variant-danger {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  background: var(--gd-palette-error-base);
+  color: var(--gd-palette-complementary-0);
+  border-color: var(--gd-palette-complementary-9-t90);
+  font-weight: 700;
+}
+.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):focus {
+  border-color: var(--gd-palette-complementary-9-t80);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):hover {
+  border-color: var(--gd-palette-complementary-9-t80);
+  background-color: var(--gd-palette-error-base-d10);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):active {
+  border-color: var(--gd-palette-complementary-9-t80);
+  background: var(--gd-palette-error-base-d20);
+  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-danger:disabled {
+  background-color: var(--gd-palette-error-disabled);
+  box-shadow: none;
+  border-color: transparent;
 }
 
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes react-loading-skeleton {
   100% {
     transform: translateX(100%);
@@ -819,54 +1649,131 @@
     --pseudo-element-display: none; /* Disable animation */
   }
 }
-.gd-ui-ext-skeleton {
+.gd-ui-kit-skeleton {
   height: 100%;
   width: 100%;
   display: flex;
+}
+.gd-ui-kit-skeleton--direction-column {
   flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.gd-ui-kit-skeleton--direction-row {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
 }
-.gd-ui-ext-skeleton__item {
+.gd-ui-kit-skeleton__item {
   border-radius: 3px;
+  width: 100%;
+  height: 100%;
 }
-.gd-ui-ext-skeleton .react-loading-skeleton {
+.gd-ui-kit-skeleton .react-loading-skeleton {
   --base-color: var(--gd-palette-complementary-2);
   --highlight-color: var(--gd-palette-complementary-0);
 }
-.gd-ui-ext-skeleton span {
+.gd-ui-kit-skeleton span {
   line-height: 0;
   font-size: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
-.gd-ui-ext-virtual-list {
+.gd-ui-kit-paged-virtual-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
   height: 100%;
   width: 100%;
 }
-.gd-ui-ext-virtual-list--hasScroll {
+.gd-ui-kit-paged-virtual-list--hasScroll {
   padding-right: 4px;
 }
-.gd-ui-ext-virtual-list__scroll-container {
+.gd-ui-kit-paged-virtual-list__scroll-container {
+  min-height: 0;
+  max-height: 100%;
   overflow: auto;
   overflow-x: hidden;
 }
-.gd-ui-ext-virtual-list__scroll-container::-webkit-scrollbar {
+.gd-ui-kit-paged-virtual-list__scroll-container::-webkit-scrollbar {
   -webkit-appearance: none;
   appearance: none;
   width: 6px;
 }
-.gd-ui-ext-virtual-list__scroll-container::-webkit-scrollbar-thumb {
+.gd-ui-kit-paged-virtual-list__scroll-container::-webkit-scrollbar-thumb {
   background-color: var(--gd-palette-complementary-2);
   border-radius: 3px;
 }
+.gd-ui-kit-paged-virtual-list__item {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.gd-ui-kit-paged-virtual-list__gap {
+  width: 100%;
+}
+
+.gd-ui-ext-notification-details-dialog {
+  width: 245px;
+  box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
+  border-radius: 3px;
+  border: 1px solid var(--gd-palette-complementary-3);
+  background-color: var(--gd-palette-complementary-0);
+  font-family: var(--gd-font-family);
+}
+.gd-ui-ext-notification-details-dialog__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background: var(--gd-palette-complementary-2);
+  height: 35px;
+}
+.gd-ui-ext-notification-details-dialog__header-title {
+  color: var(--gd-palette-complementary-6);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-transform: uppercase;
+}
+.gd-ui-ext-notification-details-dialog__header-close-button {
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.gd-ui-ext-notification-details-dialog__header-close-button:hover {
+  opacity: 0.7;
+}
+.gd-ui-ext-notification-details-dialog__content {
+  padding: 10px;
+}
+.gd-ui-ext-notification-details-dialog__footer {
+  border-top: 1px solid var(--gd-palette-complementary-3);
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
 
 .gd-ui-ext-notifications-panel {
   font-family: var(--gd-font-family);
+  font-size: 12px;
+  line-height: 14px;
   background-color: var(--gd-palette-complementary-0);
   box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
+  border-radius: var(--gd-modal-borderRadius, 3px);
   display: flex;
   flex-direction: column;
-  padding-top: 15px;
-  width: 370px;
-  max-height: 560px;
+  padding-top: 10px;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -877,40 +1784,45 @@
   justify-content: space-between;
   padding-left: 15px;
   padding-right: 15px;
+  box-sizing: border-box;
   width: 100%;
 }
 .gd-ui-ext-notifications-panel-header__tabs {
   width: 100%;
-  height: 28px;
+  height: 23px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-end;
 }
 .gd-ui-ext-notifications-panel-header__mark-all-as-read-button {
-  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 23px;
   white-space: nowrap;
   border-bottom: 1px solid var(--gd-palette-complementary-3);
+  box-sizing: border-box;
 }
 
-.gd-ui-ext-open-notifications-button {
+.gd-ui-ext-notifications-panel-button {
   color: inherit;
   padding: 0 10px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.gd-ui-ext-open-notifications-button:hover, .gd-ui-ext-open-notifications-button--isOpen {
+.gd-ui-ext-notifications-panel-button:hover, .gd-ui-ext-notifications-panel-button--isOpen {
   background: rgba(255, 255, 255, 0.3);
 }
-.gd-ui-ext-open-notifications-button__icon {
+.gd-ui-ext-notifications-panel-button__icon {
   opacity: 0.8;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
-.gd-ui-ext-open-notifications-button__unread-status {
+.gd-ui-ext-notifications-panel-button__unread-status {
   width: 7px;
   height: 7px;
   border-radius: 51%;
@@ -926,6 +1838,9 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
+  height: 100%;
 }
 
 .gd-ui-ext-notifications-list-empty-state {
@@ -1014,17 +1929,17 @@
   position: absolute;
   top: 0;
   right: 0;
-  border: 1.4px solid var(--gd-palette-complementary-0);
+  border: 1.4px solid var(--gd-palette-complementary-2);
   box-sizing: content-box;
 }
 .gd-ui-ext-notification__details {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   flex-shrink: 1;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  min-width: 0;
 }
 .gd-ui-ext-notification__title {
   font-weight: 600;
@@ -1060,6 +1975,27 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  height: 16px;
+}
+.gd-ui-ext-notification__error {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  height: 16px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--gd-palette-error-base);
+  white-space: nowrap;
+  position: relative;
+}
+.gd-ui-ext-notification__error-icon {
+  width: 12px;
+  height: 12px;
+}
+.gd-ui-ext-notification__error-popup {
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .gd-ui-ext-notification-filters-detail-dialog {