.flexlayout__layout {
    --font-size: 1rem;
    --font-family: var(--threegis-font-family);

    /* Threegis Overrides */
    --color-background: var(--background-default);
    --color-3: var(--background-default);
    --color-drag1: var(--border-active);
    --color-drag1-background: var(--primary-color-oklch-alpha-12);
    --color-overflow: var(--text-default);
    --color-icon: var(--text-default);
    --color-tabset-background: var(--background-default);
    --color-tabset-background-maximized: var(--background-default);
    --color-tabset-header: var(--text-default);
    --color-underline: var(--border-active);
    --color-tab-selected: var(--text-default);
    --color-tab-selected-background: transparent;
    --color-tab-unselected: var(--text-default);
    --color-tab-unselected-background: transparent;
    --color-text: var(--text-default);
    --color-tab-background: transparent;
    --color-splitter: var(--primary-gray-light);
    --color-splitter-hover: var(--primary-color-semi-light);
    --color-splitter-drag: var(--primary-color-semi-light);
    --color-tabset-background-selected: var(--background-default);
    --color-overflow: var(--text-default);
    --color-toolbar-button-hover: var(--background-hover);
}

/* Increases the gap buttons center appropriately */
.flexlayout__tab_toolbar {
    gap: 8px;
}

/* Makes the tabset buttons center appropriately */
.flexlayout__tab_toolbar_button {
    display: flex;
    font-size: inherit;
    padding: 4px;
}

.flexlayout__tab_toolbar_button svg {
    fill: currentcolor;
}

.flexlayout__tab_toolbar_button {
    color: var(--text-default);
    background-color: var(--background-default);
    fill: var(--text-default);
}

.flexlayout__tab_toolbar_button:hover {
    color: var(--text-hover);
    background-color: var(--background-hover);
    fill: var(--text-hover);
}

.flexlayout__tab_toolbar_button:active {
    color: var(--text-active);
    background-color: var(--background-active);
    fill: var(--text-active);
}

.flexlayout__tab_toolbar_button:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

.flexlayout__tab_toolbar_button[disabled] {
    background-color: var(--background-disabled);
    color: var(--text-disabled);
}

.flexlayout__border_toolbar_button:active {
    background-color: var(--background-active);
    color: var(--text-active);
}

/* Makes the overflow text on the docking system normal font size instead of the same size as the icons.  Overrides the width set by the underline.css file (2em) to size according to the icon style */
.flexlayout__tab_button_overflow_count {
    font-size: 1rem;
    width: auto;
}

/* The icon buttons in the tabset are primary text color, except the active tabset indicator icon which should be the main color.  They all use color-icon though so we have to set it temporarily to main color */
.flexlayout__tab_toolbar_icon {
    --color-icon: var(--gadget-primary);
    display: flex;
}

/* Replaces padding left right 4px with gap 8px to remove the leading spacing on the first tab */
.flexlayout__tabset_tabbar_inner_tab_container {
    padding-left: 2px;
    padding-right: 0;
    gap: 2px;
}

/* The icons are sized by the font size, ensuring the font size is correct for the close button on the tabs */
.flexlayout__tab_button_trailing {
    font-size: 1em;
    padding: 4px;
    margin: 2px;
}

/* Add slight padding to the top of the tab to separate it from the tab group */
.flexlayout__tabset_tabbar_outer_top {
    padding-top: 2px;
}

/* Round the top corners of the tab buttons and reduce the padding around the tab since the close button is adding margins */
.flexlayout__tab_button {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    padding-left: 8px;
    padding-right: 2px;
}

.flexlayout__tab {
    background-color: var(--background-default);
}

.flexlayout__tab-button:hover {
    --color-tab-selected-background: var(--background-hover);
    --color-tab-unselected-background: var(--background-hover);
}

.flexlayout__tab-button:active {
    --color-tab-selected-background: var(--background-active);
    --color-tab-unselected-background: var(--background-);
    --color-tab-selected: var(--text-primary);
    --color-tab: var(--text-primary);
}

.flexlayout__tab_button--selected {
    --color-tab-selected: var(--text-active);
}

.flexlayout__tab-button:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

/* The following lines style the splitter to match according to the design system */
.flexlayout__splitter {
    z-index: 10;
    border-radius: 6px;
}

.flexlayout__splitter_horz {
    width: 12px;
}

.flexlayout__splitter_vert {
    height: 12px;
}

@media (hover: hover) {
    .flexlayout__splitter:hover {
        border-radius: 8px;

        & .flexlayout__splitter_handle {
            background-color: var(--border-active);
        }
    }
}

.flexlayout__splitter_drag {
    & .flexlayout__splitter_handle {
        background-color: var(--border-active);
    }
}

.flexlayout__splitter_handle {
    border-radius: 6px;
    background-color: var(--primary-gray);
}

.flexlayout__splitter_handle_horz {
    width: 6px;
    height: 64px;
}

.flexlayout__splitter_handle_vert {
    width: 64px;
    height: 6px;
}

/* End Splitter Styling */

/* Tab and Tabset Styling */
.flexlayout__tab_toolbar_icon {
    margin-top: -22px;
    margin-right: -3px; /* Magic number to position this correctly, may be able to calculate, but I don't think so */

    & svg path {
        fill: var(--gadget-primary);
    }
}

/* Hide the divider between the tabs in the tabset */
.flexlayout__tabset_tab_divider {

}

/* Adds a bit of spacing to each of the splitter bars */
.flexlayout__row {
    gap: 1px;
}

/* Rounds each tab set, top and bottom */
.flexlayout__tabset_container {
    border-radius: 6px;
}

/* Applies a border to the entire tab group */
.flexlayout__tabset_tabbar_outer {
    border: 1px solid var(--primary-gray-light);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.flexlayout__popup_menu_container{
    padding: 8px 0 8px 0;
    background-color: var(--background-default);
    box-shadow: none;
}

.flexlayout__popup_menu {
    background-color: transparent;

}

.flexlayout__popup_menu_item {
    padding: 8px 4px;
    color: var(--text-default);
}

.flexlayout__tab_button_trailing:hover,
.flexlayout__popup_menu_item:hover {
    background-color: var(--background-hover);
    color: var(--text-hover);
    --color-icon: var(--text-hover);
}

.flexlayout__tab_button_trailing:active,
.flexlayout__popup_menu_item:active {
    background-color: var(--background-active);
    color: var(--text-active);
    --color-icon: var(--text-active);
}

.flexlayout__tab_button_trailing:focus-visible,
.flexlayout__popup_menu_item:focus-visible {
    outline: 1px solid var(--border-active);
    outline-offset: -1px;
}

.flexlayout__popup_menu_item[disabled] {
    opacity: var(--disabled-opacity);
}

.flexlayout__tab_button_stamp .flexlayout__tab_button_stamp {
    column-gap: 16px;
    row-gap: 8px;
}

.flexlayout__tab_button_stamp .flexlayout__tab_button_content {
    font-size: var(--font-size-root);
}

/* only show the overflow menu item close button in the overflow popup menu  */
.flexlayout__tab_button .overflow-only-close {
    display: none !important;
}

/* Show it only when inside the popup menu list */
.flexlayout__popup_menu_item .overflow-only-close {
    display: flex !important;
}

.flexlayout__popup_menu_item>span {
    width: 100% !important;
    display: flex;
}
.flexlayout__popup_menu_item .overflow-only-close:hover {
    background-color: #0000000a;
}

.flexlayout__tab_button_content {
    width: 100%;
    gap: 16px;
}

.flexlayout__tab_button_stamp {
    display: flex;
}