d2coreui 23.0.21 → 23.0.23

package/style/flexLayout/flexLayoutBase.scss

@@ -1,623 +1,623 @@
-@mixin absoluteFill {
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-}
-
-.flexlayout {
-  &__layout {
-    --color-text: #{$color_text};
-    --color-background: #{$color_background};
-    --color-base: #{$color_base};
-    --color-1: #{$color_1};
-    --color-2: #{$color_2};
-    --color-3: #{$color_3};
-    --color-4: #{$color_4};
-    --color-5: #{$color_5};
-    --color-6: #{$color_6};
-    --color-drag1: #{$color_drag1};
-    --color-drag2: #{$color_drag2};
-    --color-drag1-background: #{$color_drag1_background};
-    --color-drag2-background: #{$color_drag2_background};
-
-    --font-size: #{$font-size};
-    --font-family: #{$font-family};
-
-    @include absoluteFill;
-    overflow: hidden;
-    background-color: $color_background;
-  }
-
-  &__splitter {
-    @include splitter_mixin;
-
-    @media (hover: hover) {
-      &:hover {
-        transition: background-color ease-in .1s;
-        transition-delay: 0.05s;
-        @include splitter_hover_mixin;
-      }
-    }
-    &_border {
-      z-index: 10;
-      @include splitter_border_mixin;
-    }
-    &_drag {
-      z-index: 1000;
-      @include splitter_drag_mixin;
-    }
-    &_extra {
-      background-color: transparent;
-    }
-  }
-
-  &__outline_rect {
-    position: absolute;
-    cursor: move;
-    box-sizing: border-box;
-    border: 2px solid var(--color-drag1);
-    background: var(--color-drag1-background);
-    border-radius: 5px;
-    z-index: 1000;
-
-    &_edge {
-      cursor: move;
-      border: 2px solid var(--color-drag2);
-      background: var(--color-drag2-background);
-      border-radius: 5px;
-      z-index: 1000;
-      box-sizing: border-box;
-    }
-  }
-
-  &__edge_rect {
-    position: absolute;
-    z-index: 1000;
-    background-color: $color_background;
-  }
-
-  &__drag_rect {
-    position: absolute;
-    cursor: move;
-    background-color: $color_background;
-    border: 2px solid $color_background_border;
-    border-radius: 5px;
-    z-index: 1000;
-    box-sizing: border-box;
-    opacity: 0.9;
-    text-align: center;
-
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    overflow: hidden;
-    padding: 0.5em 1em;
-    word-wrap: break-word;
-    font-size: var(--font-size);
-    font-family: var(--font-family);
-  }
-
-  &__tabset {
-    overflow: hidden;
-    color: $color_text;
-    background-color: $color_background;
-    line-height: 1.5;
-    box-sizing: border-box;
-    font-size: $font-size;
-    font-family: $font-family;
-    font-feature-settings: "tnum";
-    zoom: 1;
-    margin: 0;
-    padding: 0;
-    font-variant: tabular-nums;
-
-    &_header {
-      // tabset header bar
-      position: absolute;
-      display: flex;
-      align-items: center;
-      left: 0;
-      right: 0;
-      background-color: $color_background;
-      color: $color_text;
-      padding: 3px 3px 3px 5px;
-      box-sizing: border-box;
-      border-bottom: 1px solid var(--color-3);
-      @include tabset_header_mixin;
-
-      &_content {
-        flex-grow: 1;
-      }
-    }
-
-    &_tabbar {
-      &_outer {
-        // tabset tabbar outer
-        box-sizing: border-box;
-        position: absolute;
-        left: 2px;
-        right: 0;
-        overflow: hidden;
-        display: flex;
-        @include tabset_tabbar_mixin;
-      }
-
-      &_outer_top {
-        border-bottom: 1px solid $color_background_selected;
-      }
-
-      &_outer_bottom {
-        box-sizing: border-box;
-        border-top: 1px solid $color_background_selected;
-      }
-
-      &_inner {
-        // tabset tabbar inner
-        position: relative;
-        box-sizing: border-box;
-        display: flex;
-        flex-grow: 1;
-        overflow: hidden;
-
-        &_tab_container {
-          display: flex;
-          gap: 4px;
-          padding-left: 4px;
-          padding-right: 4px;
-          box-sizing: border-box;
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          width: 10000px;
-
-          &_top {
-            border-top: 2px solid transparent; // if you change this, update the _sizer above
-          }
-          &_bottom {
-            border-bottom: 2px solid transparent;
-          }
-        }
-      }
-    }
-
-    &-selected {
-      @include tabset_selected_mixin;
-    }
-
-    &-maximized {
-      @include tabset_maximized_mixin;
-    }
-  }
-
-  &__tab_button_stamp {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3em;
-    white-space: nowrap;
-    box-sizing: border-box;
-  }
-
-  &__tab {
-    overflow: auto;
-    position: absolute;
-    box-sizing: border-box;
-    color: $color_text;
-    background-color: $color_content_background;
-
-    &_button {
-      display: flex;
-      gap: 0.3em;
-      align-items: center;
-      box-sizing: border-box;
-      padding: 5px 10px 4px 12px; // if you change top or bottom update the tabset_sizer above
-      margin-right: 4px;
-      vertical-align: top;
-      cursor: pointer;
-      @include tab_button_mixin;
-
-      &--selected {
-        @include tab_button_selected_mixin;
-      }
-      @media (hover: hover) {
-        &:hover {
-          @include tab_button_hovered_mixin;
-        }
-      }
-
-      &--unselected {
-        @include tab_button_unselected_mixin;
-      }
-
-      &_top {
-        @include tab_top_mixin;
-      }
-
-      &_bottom {
-        @include tab_bottom_mixin;
-      }
-
-      &_leading {
-        display: flex;
-      }
-
-      &_content {
-        display: flex;
-      }
-
-      &_textbox {
-        border: none;
-        font-family: var(--font-family);
-        font-size: var(--font-size);
-        color: $color_text;
-        background-color: $color_content_background;
-        border: 1px inset var(--color-1);
-        border-radius: 3px;
-      }
-
-      &_textbox:focus {
-        outline: none;
-      }
-
-      &_trailing {
-        display: flex;
-        visibility: hidden;
-        border-radius: 4px;
-        &:hover {
-          @include close_button_hovered_mixin;
-        }
-      }
-      @media (pointer: coarse) {
-        &_trailing {
-        }
-      }
-      @media (hover: hover) {
-        &:hover &_trailing {
-          visibility: visible;
-        }
-      }
-
-      &--selected &_trailing {
-        visibility: visible;
-      }
-
-      &_overflow {
-        display: flex;
-        align-items: center;
-        border: none;
-        color: $color_text;
-        cursor: pointer;
-        font-size: inherit;
-        background-color: transparent;
-      }
-    }
-
-    &_toolbar {
-      display: flex;
-      align-items: center;
-      gap: .3em;
-      padding-left: .5em;
-      padding-right: .3em;
-
-      &_button {
-        border: none;
-        outline: none;
-        font-size: inherit;
-        margin: 0px;
-        background-color: transparent;
-        border-radius: 4px;
-        padding: 1px;
-        @media (hover: hover) {
-          &:hover {
-            @include toolbar_button_hovered_mixin;
-          }
-        }
-
-        &-min {
-        }
-
-        &-max {
-        }
-
-        &-float {
-        }
-
-        &-close {
-        }
-      }
-
-      &_sticky_buttons_container {
-        display: flex;
-        gap: 0.3em;
-        padding-left: 2px;
-        align-items: center;
-      }
-    }
-
-    &_floating {
-      overflow: auto;
-      position: absolute;
-      box-sizing: border-box;
-      color: $color_text;
-      background-color: $color_content_background;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &_inner {
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-
-      &_inner div {
-        margin-bottom: 5px;
-        text-align: center;
-      }
-
-      &_inner div a {
-        color: royalblue;
-      }
-    }
-  }
-
-  &__border {
-    box-sizing: border-box;
-    overflow: hidden;
-    display: flex;
-    font-size: var(--font-size);
-    font-family: var(--font-family);
-    @include border_mixin;
-
-    &_top {
-      border-bottom: 1px solid $color_border_line;
-      align-items: center;
-    }
-
-    &_bottom {
-      border-top: 1px solid $color_border_line;
-      align-items: center;
-    }
-
-    &_left {
-      border-right: 1px solid $color_border_line;
-      align-content: center;
-      flex-direction: column;
-    }
-
-    &_right {
-      border-left: 1px solid $color_border_line;
-      align-content: center;
-      flex-direction: column;
-    }
-
-    &_inner {
-      position: relative;
-      box-sizing: border-box;
-      display: flex;
-      overflow: hidden;
-      flex-grow: 1;
-
-      &_tab_container {
-        white-space: nowrap;
-        display: flex;
-        gap: 4px;
-        padding-left: 2px;
-        padding-right: 2px;
-        box-sizing: border-box;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 10000px;
-
-        &_right {
-          transform-origin: top left;
-          transform: rotate(90deg);
-        }
-        &_left {
-          flex-direction: row-reverse;
-          transform-origin: top right;
-          transform: rotate(-90deg);
-        }
-      }
-    }
-
-    &_button {
-      display: flex;
-      gap: 0.3em;
-      align-items: center;
-      cursor: pointer;
-      padding: 3px 0.5em;
-      margin: 2px 0px;
-      box-sizing: border-box;
-      white-space: nowrap;
-      @include border_button_mixin;
-
-      &--selected {
-        @include border_button_selected_mixin;
-      }
-      @media (hover: hover) {
-        &:hover {
-          @include border_button_hovered_mixin;
-        }
-      }
-
-      &--unselected {
-        @include border_button_unselected_mixin;
-      }
-
-      &_leading {
-        display: flex;
-      }
-
-      &_content {
-        display: flex;
-      }
-
-      &_trailing {
-        display: flex;
-        border-radius: 4px;
-        visibility: hidden;
-        color: $color_text;
-        &:hover {
-          @include close_button_hovered_mixin;
-        }
-      }
-      @media (pointer: coarse) {
-        &_trailing {
-        }
-      }
-      @media (hover: hover) {
-        &:hover &_trailing {
-          visibility: visible;
-        }
-      }
-
-      &--selected &_trailing {
-        visibility: visible;
-      }
-    }
-
-    &_toolbar {
-      display: flex;
-      gap: .3em;
-      align-items: center;
-
-      &_left,
-      &_right {
-        flex-direction: column;
-        padding-top: .5em;
-        padding-bottom: .3em;
-      }
-
-      &_top,
-      &_bottom {
-        padding-left: .5em;
-        padding-right: .3em;
-      }
-
-      &_button {
-        border: none;
-        outline: none;
-        font-size: inherit;
-        background-color: transparent;
-        border-radius: 4px;
-        padding: 1px;
-        @media (hover: hover) {
-          &:hover {
-            @include toolbar_button_hovered_mixin;
-          }
-        }
-
-        &-float {
-        }
-
-        &_overflow {
-          display: flex;
-          align-items: center;
-          border: none;
-          color: gray;
-          font-size: inherit;
-          background-color: transparent;
-        }
-
-        &_overflow_top,
-        &_overflow_bottom {
-        }
-
-        &_overflow_right,
-        &_overflow_left {
-        }
-      }
-    }
-  }
-
-  &__popup_menu {
-    font-size: var(--font-size);
-    font-family: var(--font-family);
-
-    &_item {
-      padding: 2px 0.5em;
-      white-space: nowrap;
-      cursor: pointer;
-      border-radius: 2px;
-    }
-
-    @media (hover: hover) {
-      &_item:hover {
-        background-color: $color_border;
-      }
-    }
-
-    &_container {
-      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
-      border: 1px solid $color_border;
-      color: $color_text;
-      background: $color_background;
-      border-radius: 3px;
-      position: absolute;
-      z-index: 1000;
-      max-height: 50%;
-      min-width: 100px;
-      overflow: auto;
-      padding: 2px;
-    }
-  }
-
-  &__floating_window {
-    _body {
-      height: 100%;
-    }
-
-    &_content {
-      @include absoluteFill;
-    }
-
-    &_tab {
-      overflow: auto;
-      @include absoluteFill;
-
-      box-sizing: border-box;
-      background-color: var(--color-background);
-      color: var(--color-text);
-    }
-  }
-
-  &__error_boundary_container {
-    @include absoluteFill;
-    display: flex;
-    justify-content: center;
-  }
-  &__error_boundary_content {
-    display: flex;
-    align-items: center;
-  }
-
-  // These classes are used to measure the sizes for tab header bar, tab bar and border bars,
-  // only the height is used, the padding should match the vertical spacing (padding & margins)
-  // that have been used in the above classes
-
-  &__tabset_sizer {
-    padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
-    padding-bottom: 3px; // tab_button has 3 padding bottom
-    font-size: $font-size;
-    font-family: $font-family;
-  }
-
-  &__tabset_header_sizer {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: $font-size;
-    font-family: $font-family;
-  }
-
-  &__border_sizer {
-    padding-top: 6px;
-    padding-bottom: 5px;
-    font-size: $font-size;
-    font-family: $font-family;
-  }
-}
+@mixin absoluteFill {
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.flexlayout {
+  &__layout {
+    --color-text: #{$color_text};
+    --color-background: #{$color_background};
+    --color-base: #{$color_base};
+    --color-1: #{$color_1};
+    --color-2: #{$color_2};
+    --color-3: #{$color_3};
+    --color-4: #{$color_4};
+    --color-5: #{$color_5};
+    --color-6: #{$color_6};
+    --color-drag1: #{$color_drag1};
+    --color-drag2: #{$color_drag2};
+    --color-drag1-background: #{$color_drag1_background};
+    --color-drag2-background: #{$color_drag2_background};
+
+    --font-size: #{$font-size};
+    --font-family: #{$font-family};
+
+    @include absoluteFill;
+    overflow: hidden;
+    background-color: $color_background;
+  }
+
+  &__splitter {
+    @include splitter_mixin;
+
+    @media (hover: hover) {
+      &:hover {
+        transition: background-color ease-in .1s;
+        transition-delay: 0.05s;
+        @include splitter_hover_mixin;
+      }
+    }
+    &_border {
+      z-index: 10;
+      @include splitter_border_mixin;
+    }
+    &_drag {
+      z-index: 1000;
+      @include splitter_drag_mixin;
+    }
+    &_extra {
+      background-color: transparent;
+    }
+  }
+
+  &__outline_rect {
+    position: absolute;
+    cursor: move;
+    box-sizing: border-box;
+    border: 2px solid var(--color-drag1);
+    background: var(--color-drag1-background);
+    border-radius: 5px;
+    z-index: 1000;
+
+    &_edge {
+      cursor: move;
+      border: 2px solid var(--color-drag2);
+      background: var(--color-drag2-background);
+      border-radius: 5px;
+      z-index: 1000;
+      box-sizing: border-box;
+    }
+  }
+
+  &__edge_rect {
+    position: absolute;
+    z-index: 1000;
+    background-color: $color_background;
+  }
+
+  &__drag_rect {
+    position: absolute;
+    cursor: move;
+    background-color: $color_background;
+    border: 2px solid $color_background_border;
+    border-radius: 5px;
+    z-index: 1000;
+    box-sizing: border-box;
+    opacity: 0.9;
+    text-align: center;
+
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0.5em 1em;
+    word-wrap: break-word;
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+  }
+
+  &__tabset {
+    overflow: hidden;
+    color: $color_text;
+    background-color: $color_background;
+    line-height: 1.5;
+    box-sizing: border-box;
+    font-size: $font-size;
+    font-family: $font-family;
+    font-feature-settings: "tnum";
+    zoom: 1;
+    margin: 0;
+    padding: 0;
+    font-variant: tabular-nums;
+
+    &_header {
+      // tabset header bar
+      position: absolute;
+      display: flex;
+      align-items: center;
+      left: 0;
+      right: 0;
+      background-color: $color_background;
+      color: $color_text;
+      padding: 3px 3px 3px 5px;
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--color-3);
+      @include tabset_header_mixin;
+
+      &_content {
+        flex-grow: 1;
+      }
+    }
+
+    &_tabbar {
+      &_outer {
+        // tabset tabbar outer
+        box-sizing: border-box;
+        position: absolute;
+        left: 2px;
+        right: 0;
+        overflow: hidden;
+        display: flex;
+        @include tabset_tabbar_mixin;
+      }
+
+      &_outer_top {
+        border-bottom: 1px solid $color_background_selected;
+      }
+
+      &_outer_bottom {
+        box-sizing: border-box;
+        border-top: 1px solid $color_background_selected;
+      }
+
+      &_inner {
+        // tabset tabbar inner
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-grow: 1;
+        overflow: hidden;
+
+        &_tab_container {
+          display: flex;
+          gap: 4px;
+          padding-left: 4px;
+          padding-right: 4px;
+          box-sizing: border-box;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: 10000px;
+
+          &_top {
+            border-top: 2px solid transparent; // if you change this, update the _sizer above
+          }
+          &_bottom {
+            border-bottom: 2px solid transparent;
+          }
+        }
+      }
+    }
+
+    &-selected {
+      @include tabset_selected_mixin;
+    }
+
+    &-maximized {
+      @include tabset_maximized_mixin;
+    }
+  }
+
+  &__tab_button_stamp {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3em;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  &__tab {
+    overflow: auto;
+    position: absolute;
+    box-sizing: border-box;
+    color: $color_text;
+    background-color: $color_content_background;
+
+    &_button {
+      display: flex;
+      gap: 0.3em;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 5px 10px 4px 12px; // if you change top or bottom update the tabset_sizer above
+      margin-right: 4px;
+      vertical-align: top;
+      cursor: pointer;
+      @include tab_button_mixin;
+
+      &--selected {
+        @include tab_button_selected_mixin;
+      }
+      @media (hover: hover) {
+        &:hover {
+          @include tab_button_hovered_mixin;
+        }
+      }
+
+      &--unselected {
+        @include tab_button_unselected_mixin;
+      }
+
+      &_top {
+        @include tab_top_mixin;
+      }
+
+      &_bottom {
+        @include tab_bottom_mixin;
+      }
+
+      &_leading {
+        display: flex;
+      }
+
+      &_content {
+        display: flex;
+      }
+
+      &_textbox {
+        border: none;
+        font-family: var(--font-family);
+        font-size: var(--font-size);
+        color: $color_text;
+        background-color: $color_content_background;
+        border: 1px inset var(--color-1);
+        border-radius: 3px;
+      }
+
+      &_textbox:focus {
+        outline: none;
+      }
+
+      &_trailing {
+        display: flex;
+        visibility: hidden;
+        border-radius: 4px;
+        &:hover {
+          @include close_button_hovered_mixin;
+        }
+      }
+      @media (pointer: coarse) {
+        &_trailing {
+        }
+      }
+      @media (hover: hover) {
+        &:hover &_trailing {
+          visibility: visible;
+        }
+      }
+
+      &--selected &_trailing {
+        visibility: visible;
+      }
+
+      &_overflow {
+        display: flex;
+        align-items: center;
+        border: none;
+        color: $color_text;
+        cursor: pointer;
+        font-size: inherit;
+        background-color: transparent;
+      }
+    }
+
+    &_toolbar {
+      display: flex;
+      align-items: center;
+      gap: .3em;
+      padding-left: .5em;
+      padding-right: .3em;
+
+      &_button {
+        border: none;
+        outline: none;
+        font-size: inherit;
+        margin: 0px;
+        background-color: transparent;
+        border-radius: 4px;
+        padding: 1px;
+        @media (hover: hover) {
+          &:hover {
+            @include toolbar_button_hovered_mixin;
+          }
+        }
+
+        &-min {
+        }
+
+        &-max {
+        }
+
+        &-float {
+        }
+
+        &-close {
+        }
+      }
+
+      &_sticky_buttons_container {
+        display: flex;
+        gap: 0.3em;
+        padding-left: 2px;
+        align-items: center;
+      }
+    }
+
+    &_floating {
+      overflow: auto;
+      position: absolute;
+      box-sizing: border-box;
+      color: $color_text;
+      background-color: $color_content_background;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &_inner {
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &_inner div {
+        margin-bottom: 5px;
+        text-align: center;
+      }
+
+      &_inner div a {
+        color: royalblue;
+      }
+    }
+  }
+
+  &__border {
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    @include border_mixin;
+
+    &_top {
+      border-bottom: 1px solid $color_border_line;
+      align-items: center;
+    }
+
+    &_bottom {
+      border-top: 1px solid $color_border_line;
+      align-items: center;
+    }
+
+    &_left {
+      border-right: 1px solid $color_border_line;
+      align-content: center;
+      flex-direction: column;
+    }
+
+    &_right {
+      border-left: 1px solid $color_border_line;
+      align-content: center;
+      flex-direction: column;
+    }
+
+    &_inner {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      overflow: hidden;
+      flex-grow: 1;
+
+      &_tab_container {
+        white-space: nowrap;
+        display: flex;
+        gap: 4px;
+        padding-left: 2px;
+        padding-right: 2px;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 10000px;
+
+        &_right {
+          transform-origin: top left;
+          transform: rotate(90deg);
+        }
+        &_left {
+          flex-direction: row-reverse;
+          transform-origin: top right;
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &_button {
+      display: flex;
+      gap: 0.3em;
+      align-items: center;
+      cursor: pointer;
+      padding: 3px 0.5em;
+      margin: 2px 0px;
+      box-sizing: border-box;
+      white-space: nowrap;
+      @include border_button_mixin;
+
+      &--selected {
+        @include border_button_selected_mixin;
+      }
+      @media (hover: hover) {
+        &:hover {
+          @include border_button_hovered_mixin;
+        }
+      }
+
+      &--unselected {
+        @include border_button_unselected_mixin;
+      }
+
+      &_leading {
+        display: flex;
+      }
+
+      &_content {
+        display: flex;
+      }
+
+      &_trailing {
+        display: flex;
+        border-radius: 4px;
+        visibility: hidden;
+        color: $color_text;
+        &:hover {
+          @include close_button_hovered_mixin;
+        }
+      }
+      @media (pointer: coarse) {
+        &_trailing {
+        }
+      }
+      @media (hover: hover) {
+        &:hover &_trailing {
+          visibility: visible;
+        }
+      }
+
+      &--selected &_trailing {
+        visibility: visible;
+      }
+    }
+
+    &_toolbar {
+      display: flex;
+      gap: .3em;
+      align-items: center;
+
+      &_left,
+      &_right {
+        flex-direction: column;
+        padding-top: .5em;
+        padding-bottom: .3em;
+      }
+
+      &_top,
+      &_bottom {
+        padding-left: .5em;
+        padding-right: .3em;
+      }
+
+      &_button {
+        border: none;
+        outline: none;
+        font-size: inherit;
+        background-color: transparent;
+        border-radius: 4px;
+        padding: 1px;
+        @media (hover: hover) {
+          &:hover {
+            @include toolbar_button_hovered_mixin;
+          }
+        }
+
+        &-float {
+        }
+
+        &_overflow {
+          display: flex;
+          align-items: center;
+          border: none;
+          color: gray;
+          font-size: inherit;
+          background-color: transparent;
+        }
+
+        &_overflow_top,
+        &_overflow_bottom {
+        }
+
+        &_overflow_right,
+        &_overflow_left {
+        }
+      }
+    }
+  }
+
+  &__popup_menu {
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+
+    &_item {
+      padding: 2px 0.5em;
+      white-space: nowrap;
+      cursor: pointer;
+      border-radius: 2px;
+    }
+
+    @media (hover: hover) {
+      &_item:hover {
+        background-color: $color_border;
+      }
+    }
+
+    &_container {
+      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
+      border: 1px solid $color_border;
+      color: $color_text;
+      background: $color_background;
+      border-radius: 3px;
+      position: absolute;
+      z-index: 1000;
+      max-height: 50%;
+      min-width: 100px;
+      overflow: auto;
+      padding: 2px;
+    }
+  }
+
+  &__floating_window {
+    _body {
+      height: 100%;
+    }
+
+    &_content {
+      @include absoluteFill;
+    }
+
+    &_tab {
+      overflow: auto;
+      @include absoluteFill;
+
+      box-sizing: border-box;
+      background-color: var(--color-background);
+      color: var(--color-text);
+    }
+  }
+
+  &__error_boundary_container {
+    @include absoluteFill;
+    display: flex;
+    justify-content: center;
+  }
+  &__error_boundary_content {
+    display: flex;
+    align-items: center;
+  }
+
+  // These classes are used to measure the sizes for tab header bar, tab bar and border bars,
+  // only the height is used, the padding should match the vertical spacing (padding & margins)
+  // that have been used in the above classes
+
+  &__tabset_sizer {
+    padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
+    padding-bottom: 3px; // tab_button has 3 padding bottom
+    font-size: $font-size;
+    font-family: $font-family;
+  }
+
+  &__tabset_header_sizer {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: $font-size;
+    font-family: $font-family;
+  }
+
+  &__border_sizer {
+    padding-top: 6px;
+    padding-bottom: 5px;
+    font-size: $font-size;
+    font-family: $font-family;
+  }
+}