d2coreui 23.0.15 → 23.0.17

package/style/flexLayout/new/_base.scss

@@ -1,616 +1,616 @@
-@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;
-    }
-
-    &__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;
-        pointer-events: none;
-        box-sizing: border-box;
-        border: 2px solid var(--color-drag1);
-        background: var(--color-drag1-background);
-        border-radius: 5px;
-        z-index: 1000;
-
-        &_edge {
-            pointer-events: none;
-            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;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-        background-color: gray;
-        pointer-events: none;
-    }
-
-    &__drag_rect {
-        position: absolute;
-        cursor: move;
-        color: var(--color-text);
-        background-color: var(--color-1);
-        border: 2px solid var(--color-4);
-        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
-        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;
-        background-color: var(--color-1);
-        box-sizing: border-box;
-        font-size: var(--font-size);
-        font-family: var(--font-family);
-        @include tabset_mixin;
-
-        &_header {
-            // tabset header bar
-            position: absolute;
-            display: flex;
-            align-items: center;
-            left: 0;
-            right: 0;
-            padding: 3px 3px 3px 5px;
-            box-sizing: border-box;
-            border-bottom: 1px solid var(--color-3);
-            color: var(--color-text);
-            @include tabset_header_mixin;
-
-            &_content {
-                flex-grow: 1;
-            }
-        }
-
-        &_tabbar {
-            &_outer {
-                // tabset tabbar outer
-                box-sizing: border-box;
-                background-color: var(--color-1);
-                position: absolute;
-                left: 0;
-                right: 0;
-                overflow: hidden;
-                display: flex;
-                @include tabset_tabbar_mixin;
-            }
-
-            &_outer_top {
-                border-bottom: 1px solid var(--color-3);
-            }
-
-            &_outer_bottom {
-                border-top: 1px solid var(--color-3);
-            }
-
-            &_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: var(--color-text);
-        background-color: var(--color-background);
-
-        &_button {
-            display: flex;
-            gap: 0.3em;
-            align-items: center;
-            box-sizing: border-box;
-            padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
-
-            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: var(--color-text);
-                background-color: var(--color-5);
-                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: gray;
-                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: var(--color-text);
-            background-color: var(--color-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 var(--color-3);
-            align-items: center;
-        }
-
-        &_bottom {
-            border-top: 1px solid var(--color-3);
-            align-items: center;
-        }
-
-        &_left {
-            border-right: 1px solid var(--color-3);
-            align-content: center;
-            flex-direction: column;
-        }
-
-        &_right {
-            border-left: 1px solid var(--color-3);
-            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;
-                &: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: var(--color-6);
-            }
-        }
-
-        &_container {
-            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
-            border: 1px solid var(--color-6);
-            color: var(--color-text);
-            background: var(--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: var(--font-size);
-        font-family: var(--font-family);
-    }
-
-    &__tabset_header_sizer {
-        padding-top: 3px;
-        padding-bottom: 3px;
-        font-size: var(--font-size);
-        font-family: var(--font-family);
-    }
-
-    &__border_sizer {
-        padding-top: 6px;
-        padding-bottom: 5px;
-        font-size: var(--font-size);
-        font-family: var(--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;
+    }
+
+    &__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;
+        pointer-events: none;
+        box-sizing: border-box;
+        border: 2px solid var(--color-drag1);
+        background: var(--color-drag1-background);
+        border-radius: 5px;
+        z-index: 1000;
+
+        &_edge {
+            pointer-events: none;
+            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;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        background-color: gray;
+        pointer-events: none;
+    }
+
+    &__drag_rect {
+        position: absolute;
+        cursor: move;
+        color: var(--color-text);
+        background-color: var(--color-1);
+        border: 2px solid var(--color-4);
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
+        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;
+        background-color: var(--color-1);
+        box-sizing: border-box;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+        @include tabset_mixin;
+
+        &_header {
+            // tabset header bar
+            position: absolute;
+            display: flex;
+            align-items: center;
+            left: 0;
+            right: 0;
+            padding: 3px 3px 3px 5px;
+            box-sizing: border-box;
+            border-bottom: 1px solid var(--color-3);
+            color: var(--color-text);
+            @include tabset_header_mixin;
+
+            &_content {
+                flex-grow: 1;
+            }
+        }
+
+        &_tabbar {
+            &_outer {
+                // tabset tabbar outer
+                box-sizing: border-box;
+                background-color: var(--color-1);
+                position: absolute;
+                left: 0;
+                right: 0;
+                overflow: hidden;
+                display: flex;
+                @include tabset_tabbar_mixin;
+            }
+
+            &_outer_top {
+                border-bottom: 1px solid var(--color-3);
+            }
+
+            &_outer_bottom {
+                border-top: 1px solid var(--color-3);
+            }
+
+            &_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: var(--color-text);
+        background-color: var(--color-background);
+
+        &_button {
+            display: flex;
+            gap: 0.3em;
+            align-items: center;
+            box-sizing: border-box;
+            padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
+
+            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: var(--color-text);
+                background-color: var(--color-5);
+                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: gray;
+                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: var(--color-text);
+            background-color: var(--color-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 var(--color-3);
+            align-items: center;
+        }
+
+        &_bottom {
+            border-top: 1px solid var(--color-3);
+            align-items: center;
+        }
+
+        &_left {
+            border-right: 1px solid var(--color-3);
+            align-content: center;
+            flex-direction: column;
+        }
+
+        &_right {
+            border-left: 1px solid var(--color-3);
+            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;
+                &: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: var(--color-6);
+            }
+        }
+
+        &_container {
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
+            border: 1px solid var(--color-6);
+            color: var(--color-text);
+            background: var(--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: var(--font-size);
+        font-family: var(--font-family);
+    }
+
+    &__tabset_header_sizer {
+        padding-top: 3px;
+        padding-bottom: 3px;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+    }
+
+    &__border_sizer {
+        padding-top: 6px;
+        padding-bottom: 5px;
+        font-size: var(--font-size);
+        font-family: var(--font-family);
+    }
+}