@use 'sass:color';

@mixin light_theme {
    $color_text: black !default;
    $color_background: white !default;
    $color_base: white !default;
    $color_1: color.adjust($color_base, $lightness: -3%) !default;
    $color_2: color.adjust($color_1, $lightness: -3%) !default;
    $color_3: color.adjust($color_2, $lightness: -3%) !default;
    $color_4: color.adjust($color_3, $lightness: -3%) !default;
    $color_5: color.adjust($color_4, $lightness: -3%) !default;
    $color_6: color.adjust($color_5, $lightness: -3%) !default;
    $color_drag1: rgb(95, 134, 196) !default;
    $color_drag2: rgb(119, 166, 119) !default;
    $color_drag1_background: rgba(95, 134, 196, 0.1) !default;
    $color_drag2_background: rgba(119, 166, 119, 0.075) !default;

    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: normal !default;

    .flexlayout {
        &__layout {
            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, #{$color_drag2});
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, #{$color_drag2_background});

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, gray);
            --fl-color-icon: var(--flexlayout-color-icon, gray);
            --fl-color-focus: var(--flexlayout-color-focus, #3b7de7); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, var(--fl-color-background));
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--fl-color-4));

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--fl-color-background));
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-background));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-4));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, var(--fl-color-background));
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, var(--fl-color-text));
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--fl-color-4));
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-3));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--fl-color-text));
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--fl-color-4));
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--fl-color-2));

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-1));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-4));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-4));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, #ccc);
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-5));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-6));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-background));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, var(--fl-color-text));
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-3));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, #aaa);
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, #555);

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(128, 128, 128, 0.5));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(128, 128, 128, 0.7));
            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 3px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-3));
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin light_theme_overrides {
    /* 
    light theme overrides 
*/

}

@mixin dark_theme {
    $color_text: #eeeeee !default;
    $color_background: black !default;
    $color_base: black !default;
    $color_1: color.adjust($color_base, $lightness: 7%) !default;
    $color_2: color.adjust($color_base, $lightness: 10%) !default;
    $color_3: color.adjust($color_base, $lightness: 15%) !default;
    $color_4: color.adjust($color_base, $lightness: 20%) !default;
    $color_5: color.adjust($color_base, $lightness: 25%) !default;
    $color_6: color.adjust($color_base, $lightness: 30%) !default;
    $color_drag1: rgb(207, 232, 255) !default;
    $color_drag2: rgb(183, 209, 181) !default;
    $color_drag1_background: rgba(128, 128, 128, 0.15) !default;
    $color_drag2_background: rgba(128, 128, 128, 0.15) !default;

    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: normal !default;

    .flexlayout {
        &__layout {
            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, #{$color_drag2});
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, #{$color_drag2_background});

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, gray);
            --fl-color-icon: var(--flexlayout-color-icon, gray);
            --fl-color-focus: var(--flexlayout-color-focus, #93c5fd); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, var(--fl-color-1));
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--fl-color-4));

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--fl-color-background));
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-1));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-4));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, var(--fl-color-background));
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, var(--fl-color-text));
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--fl-color-4));
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-3));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--fl-color-text));
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--fl-color-4));
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--fl-color-2));

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-2));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-4));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-5));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--fl-color-4));
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-1));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-6));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-background));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, var(--fl-color-text));
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-4));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, gray);
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, #eee);

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(128, 128, 128, 0.5));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(128, 128, 128, 0.8));
            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 3px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-4));
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin dark_theme_overrides {

    /* 
    dark theme overrides 
*/
    .flexlayout {
        &__tabset-selected {
            // background-color: var(--fl-color-3);
        }

        &__tabset-maximized {
            // background-color: var(--fl-color-3);
        }

        &__tab_top {
            box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        &__tab_bottom {
            box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        &__border_button {
            box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
            border-radius: 3px;
        }
    }
}

@mixin gray_theme {
    $color_text: black !default;
    $color_background: white !default;
    $color_base: white !default;
    $color_1: color.adjust($color_base, $lightness: -3%) !default;
    $color_2: color.adjust($color_base, $lightness: -10%) !default;
    $color_3: color.adjust($color_base, $lightness: -15%) !default;
    $color_4: color.adjust($color_base, $lightness: -20%) !default;
    $color_5: color.adjust($color_base, $lightness: -25%) !default;
    $color_6: color.adjust($color_base, $lightness: -30%) !default;
    $color_drag1: rgb(95, 134, 196) !default;
    $color_drag2: rgb(119, 166, 119) !default;
    $color_drag1_background: rgba(95, 134, 196, 0.1) !default;
    $color_drag2_background: rgba(119, 166, 119, 0.075) !default;
    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: normal !default;

    .flexlayout {
        &__layout {
            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, #{$color_drag2});
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, #{$color_drag2_background});

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, gray);
            --fl-color-icon: var(--flexlayout-color-icon, gray);
            --fl-color-focus: var(--flexlayout-color-focus, #3b7de7); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, var(--fl-color-1));
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--fl-color-3));

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--fl-color-background));
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-1));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-3));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, var(--fl-color-background));
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, var(--fl-color-text));
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--fl-color-3));
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-3));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--fl-color-text));
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--fl-color-3));
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--fl-color-2));

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-2));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-4));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-5));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--fl-color-4));
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-3));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-6));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-background));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, var(--fl-color-text));
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-3));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, #aaa);
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, #555);

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(128, 128, 128, 0.5));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(128, 128, 128, 0.7));
            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 3px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-4));
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin gray_theme_overrides {

    /* 
    gray theme overrides 
*/
    .flexlayout {
        &__tabset-selected {
            // background-color: var(--fl-color-2);
        }

        &__tabset-maximized {
            // background-color: var(--fl-color-2);
        }

        &__tab_button_top {
            box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        &__tab_button_bottom {
            box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        &__border_button {
            box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
            border-radius: 3px;
        }
    }
}

@mixin underline_theme {
    $color_text: black !default;
    $color_background: white !default;
    $color_base: white !default;
    $color_1: color.adjust($color_base, $lightness: -2%) !default;
    $color_2: color.adjust($color_1, $lightness: -2%) !default;
    $color_3: color.adjust($color_2, $lightness: -3%) !default;
    $color_4: color.adjust($color_3, $lightness: -3%) !default;
    $color_5: color.adjust($color_4, $lightness: -3%) !default;
    $color_6: color.adjust($color_5, $lightness: -3%) !default;
    $color_drag1: rgb(95, 134, 196) !default;
    $color_drag2: rgb(119, 166, 119) !default;
    $color_drag1_background: rgba(95, 134, 196, 0.1) !default;
    $color_drag2_background: rgba(119, 166, 119, 0.075) !default;

    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: normal !default;

    .flexlayout {
        &__layout {
            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, #{$color_drag2});
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, #{$color_drag2_background});

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, gray);
            --fl-color-icon: var(--flexlayout-color-icon, gray);
            --fl-color-focus: var(--flexlayout-color-focus, #3b7de7); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, var(--fl-color-background));
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--fl-color-3));

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--fl-color-background));
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-background));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-3));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, var(--fl-color-background));
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, var(--fl-color-text));
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, transparent);
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-3));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--fl-color-text));
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, transparent);
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, transparent);

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-1));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-4));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-4));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--fl-color-6));
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-4));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-6));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-background));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, var(--fl-color-text));
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-3));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, #aaa);
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, #555);

            --fl-color-underline: var(--flexlayout-color-underline, rgb(65, 105, 225));
            --fl-color-underline-hover: var(--flexlayout-color-underline-hover, #aaa);
            --fl-underline_height: 3px;

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(128, 128, 128, 0.5));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(128, 128, 128, 0.7));
            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 4px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-3));
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin underline_theme_overrides {

    /* 
    underline theme overrides 
*/
    .flexlayout {

        &__tab_button {
            padding: 2px 0.5em calc(4px - var(--fl-underline_height)) 0.5em;
        }

        &__tab_button--selected {
            border-bottom: var(--fl-underline_height) solid var(--fl-color-underline);
        }

        &__tab_button--unselected {
            border-bottom: var(--fl-underline_height) solid transparent;
        }

        &__border_button {
            padding: 2px 0.5em calc(4px - var(--fl-underline_height)) 0.5em;
        }

        &__border_button--selected {
            border-bottom: var(--fl-underline_height) solid var(--fl-color-underline);
        }

        &__border_button--unselected {
            border-bottom: var(--fl-underline_height) solid transparent;
        }

        &__tabset_tab_divider,
        &__border_tab_divider {
            width: 1px;
            height: .8em;
            margin: 0px 6px 0px 6px;
            background-color: #ddd;
        }

        &__tab_button_textbox {
            border: none;
        }
    }
}

@mixin rounded_theme {
    $color_text: black !default;
    $color_background: #e9eef6 !default;
    $color_base: #f2f6fb !default;
    $color_1: color.adjust($color_base, $lightness: -3%) !default;
    $color_2: color.adjust($color_1, $lightness: -3%) !default;
    $color_3: color.adjust($color_2, $lightness: -3%) !default;
    $color_4: color.adjust($color_3, $lightness: -3%) !default;
    $color_5: color.adjust($color_4, $lightness: -3%) !default;
    $color_6: color.adjust($color_5, $lightness: -3%) !default;
    $color_drag1: rgb(95, 134, 196) !default;
    $color_drag2: rgb(119, 166, 119) !default;
    $color_drag1_background: rgba(95, 134, 196, 0.1) !default;
    $color_drag2_background: rgba(119, 166, 119, 0.075) !default;

    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: normal !default;

    .flexlayout {
        &__layout {

            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, var(--fl-color-drag1));
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, var(--fl-color-drag1-background));

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, #999db2);
            --fl-color-icon: var(--flexlayout-color-icon, #999db2);
            --fl-color-focus: var(--flexlayout-color-focus, #3b7de7); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, white);
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, white);

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, white);
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-background));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-background));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, white);
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, var(--fl-color-text));
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--fl-color-2));
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, #d3d4e745);
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-3));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--fl-color-text));
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--fl-color-2));
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, #d3d4e745);

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-background));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-2));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-2));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, #ccc);
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-5));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-6));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-background));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, var(--fl-color-text));
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-3));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, #a6bbdf);
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, #555);

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(180, 200, 230, 0.5));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(180, 200, 230, 0.7));

            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 4px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-2));
            --fl-tab-button-radius: var(--flexlayout-tab-button-radius, 10px);
            --fl-border-button-radius: var(--flexlayout-border-button-radius, 10px);
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin rounded_theme_overrides {

    /* 
    rounded theme overrides 
*/
    .flexlayout {
        &__tabset {
            padding: 3px;
            border-radius: 10px;
        }

        &__tabset_content {
            padding: 1px 3px 3px 3px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        &__tab_border {
            border-radius: 10px;
            padding: 5px;
        }

        &__border_tab_contents {
            border-radius: 10px;
        }

        &__tab_button {
            border-radius: var(--fl-tab-button-radius);
            padding: 2px 0.8em;
        }

        &__border_button {
            border-radius: var(--fl-border-button-radius);
            padding: 2px 0.8em;
        }

        &__tabset_tabbar_outer_top {
            border-bottom: unset;
            padding-bottom: 1px;
        }

        &__tabset_tabbar_inner_tab_container_top {
            border-bottom: 2px solid transparent;
        }

        &__border_bottom {
            border-top: 2px solid var(--fl-color-border-divider-line);
        }

        &__border_sizer {
            padding-bottom: 6px;
        }

        &__tab_button_trailing:hover {
            background-color: var(--fl-color-3);
        }

        &__border_button_trailing:hover {
            background-color: var(--fl-color-3);
        }
    }
}

@mixin alpha_light_theme {
    $color_text: black !default; // Gray 900
    $color_background: #ffffff !default;
    $color_base: #f9fafb !default; // Gray 50
    $color_1: #ededee !default; // Gray 100
    $color_2: #e5e7eb !default; // Gray 200
    $color_3: #d1d5db !default; // Gray 300
    $color_4: #9ca3af !default; // Gray 400
    $color_5: #6b7280 !default; // Gray 500
    $color_6: #4b5563 !default; // Gray 600

    $color_drag1: rgb(95, 134, 196) !default;
    $color_drag2: rgb(119, 166, 119) !default;

    $color_drag1_background: rgba(59, 130, 246, 0.1) !default;
    $color_drag2_background: rgba(16, 185, 129, 0.075) !default;

    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: 500 !default;

    .flexlayout {
        &__layout {
            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, #{$color_drag2});
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, #{$color_drag2_background});

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, var(--fl-color-5));
            --fl-color-icon: var(--flexlayout-color-icon, var(--fl-color-5));
            --fl-color-focus: var(--flexlayout-color-focus, #3b7de7); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, var(--fl-color-1));
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--fl-color-2));

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--fl-color-1));
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-1));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-2));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, var(--fl-color-background));
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, #3b7de7);
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--fl-color-background));
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, var(--fl-color-5));
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-background));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, #3b7de7);
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--fl-color-background));
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, var(--fl-color-5));
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--fl-color-1));

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-1));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-4));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-4));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--fl-color-3));
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-background));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-2));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-background));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, var(--fl-color-drag1));
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-1));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, var(--fl-color-3));
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, var(--fl-color-6));

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(0, 0, 0, 0.1));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(0, 0, 0, 0.3));
            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 4px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-2));
            --fl-tab-button-radius: var(--flexlayout-tab-button-radius, 10px);
            --fl-border-button-radius: var(--flexlayout-border-button-radius, 5px);
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin alpha_light_theme_overrides {
    .flexlayout {
        &__tab {
            border: 5px solid var(--fl-color-background);
            border-radius: 5px;
        }

        // &__tab_layout_container {
        //     margin:5px;
        //     border-radius: 5px;
        //     box-shadow: 0px 1px 7px 2px rgb(199 199 199);
        // }

        &__splitter_border .flexlayout__splitter_handle {
            visibility: visible;
        }

        &__tabset_tabbar_outer_top {
            border-bottom: unset;
        }

        &__tabset_tabbar_outer_bottom {
            border-top: unset;
        }

        &__tab_button {
            border-bottom: 2px solid transparent;
            padding: 4px 12px;

            &--selected:hover {
                background-color: var(--fl-color-background);
            }
        }

        &__tabset_tabbar_outer_top .flexlayout__tab_button--selected {
            border-top-left-radius: var(--fl-tab-button-radius);
            border-top-right-radius: var(--fl-tab-button-radius);
        }

        &__tabset_tabbar_outer_bottom .flexlayout__tab_button--selected {
            border-bottom-left-radius: var(--fl-tab-button-radius);
            border-bottom-right-radius: var(--fl-tab-button-radius);
        }

        &__tabset_tab_spacer {
            width: 12px;
        }

        &__tabset_tab_divider,
        &__border_tab_divider {
            width: 2px;
            border-radius: 2px;
            height: .8em;
            margin: 0px 5px 0px 5px;
            background-color: #ddd;
        }

        &__tabset_tab_divider_selected_before,
        &__tabset_tab_divider_selected_after {
            width: 12px;
            height: 100%;
            margin: unset;
            border-radius: unset;
            background-color: var(--fl-color-tab-selected-background);
        }

        // Define a shared block for the divider inner elements
        &__tabset_tab_divider_inner {
            height: 100%;
        }

        // When the tabset is selected, update the variable for all children
        &__tabset-selected {
            --fl-tab-divider-bg: var(--flexlayout-tab-divider-bg, var(--fl-color-tabset-background-selected));
        }
        &__tabset-maximized {
            --fl-tab-divider-bg: var(--flexlayout-tab-divider-bg, var(--fl-color-tabset-background-maximized));
        }

        // Grouping by Position (Top vs Bottom)
        &__tabset_tabbar_outer {
            &_top {
                .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
                    border-bottom-right-radius: var(--fl-tab-button-radius);
                    // Use a CSS variable that we'll update based on the tabset state
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }

                .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
                    border-bottom-left-radius: var(--fl-tab-button-radius);
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }
            }

            &_bottom {
                .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
                    border-top-right-radius: var(--fl-tab-button-radius);
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }

                .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
                    border-top-left-radius: var(--fl-tab-button-radius);
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }
            }
        }

        &__border_button {
            border-radius: var(--fl-border-button-radius);
            margin: 3px;
            padding: 3px 8px;

            &--selected {
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            }
        }

        &__border_sizer {
            padding-bottom: 8px;
        }

        &__popup_menu_container {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: 1px solid var(--fl-color-2);
            padding: 4px;
        }

        &__popup_menu_item {
            border-radius: 4px;
            padding: 6px 8px;

            &:hover {
                background-color: var(--fl-color-1);
            }
        }
    }
}

// the accessibility reference theme: alpha light with colors adjusted to meet the WCAG AA
// contrast requirements (4.5:1 for text); the axe scans in the playwright suite run against
// this theme, so adjust colors here as needed to keep them compliant
@mixin aria_theme {
    @include alpha_light_theme;

    .flexlayout {
        &__layout {
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, #2563eb); // 5.2:1 on the white tab background (#3b7de7 is only 4.0:1)
            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, #2563eb);
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, var(--fl-color-6)); // 6.5:1 on the color-1 strip (color-5 is only 4.1:1)
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, var(--fl-color-6));
        }
    }
}

@mixin aria_theme_overrides {
    @include alpha_light_theme_overrides;
}

@mixin alpha_dark_theme {
    $color_text: white !default; // Gray 200
    $color_background: black !default; // Gray 800-ish (Selected Tab)
    $color_base: #121212 !default; // Gray 950-ish (Layout Background)
    $color_1: #1c1c1c !default; // Gray 900-ish (Tab Bar)
    $color_2: #383838 !default; // Gray 800-ish
    $color_3: #404040 !default; // Gray 700-ish
    $color_4: #525252 !default; // Gray 600-ish
    $color_5: #737373 !default; // Gray 500-ish
    $color_6: #a3a3a3 !default; // Gray 400-ish

    $color_drag1: #93c5fd !default; // Blue 300
    $color_drag2: #6ee7b7 !default; // Emerald 300
    $color_drag1_background: rgba(147, 197, 253, 0.15) !default;
    $color_drag2_background: rgba(110, 231, 183, 0.1) !default;

    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: 500 !default;

    .flexlayout {
        &__layout {
            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, #{$color_drag2});
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, #{$color_drag2_background});

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, gray);
            --fl-color-icon: var(--flexlayout-color-icon, gray);
            --fl-color-focus: var(--flexlayout-color-focus, #93c5fd); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, var(--fl-color-1));
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--fl-color-2));

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--fl-color-1));
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-1));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-2));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, var(--fl-color-background));
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, #e5e7eb);
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--fl-color-background));
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, var(--fl-color-5));
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-background));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, #e5e7eb);
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--fl-color-background));
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, var(--fl-color-5));
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--fl-color-1));

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-1));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-3));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-4));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--fl-color-3));
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-background));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-2));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-background));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, #f9fafb);
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-1));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, var(--fl-color-3));
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, gray);

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(255, 255, 255, 0.1));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(255, 255, 255, 0.3));
            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 4px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-2));
            --fl-tab-button-radius: var(--flexlayout-tab-button-radius, 10px);
            --fl-border-button-radius: var(--flexlayout-border-button-radius, 5px);
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin alpha_dark_theme_overrides {
    .flexlayout {
        &__tab {
            border: 5px solid var(--fl-color-background);
            border-radius: 5px;
        }
        
        &__splitter_border .flexlayout__splitter_handle {
            visibility: visible;
        }

        &__tabset_tabbar_outer_top {
            border-bottom: unset;
        }

        &__tabset_tabbar_outer_bottom {
            border-top: unset;
        }

        &__tab_button {
            border-bottom: 2px solid transparent;
            padding: 4px 12px;

            &--selected:hover {
                background-color: var(--fl-color-background);
            }
        }

        &__tabset_tabbar_outer_top .flexlayout__tab_button--selected {
            border-top-left-radius: var(--fl-tab-button-radius);
            border-top-right-radius: var(--fl-tab-button-radius);
        }

        &__tabset_tabbar_outer_bottom .flexlayout__tab_button--selected {
            border-bottom-left-radius: var(--fl-tab-button-radius);
            border-bottom-right-radius: var(--fl-tab-button-radius);
        }

        &__tabset_tab_spacer {
            width: 12px;
        }

        &__tabset_tab_divider,
        &__border_tab_divider {
            width: 2px;
            border-radius: 2px;
            height: .8em;
            margin: 0px 5px 0px 5px;
            background-color: #333;
        }

        &__tabset_tab_divider_selected_before,
        &__tabset_tab_divider_selected_after {
            width: 12px;
            height: 100%;
            margin: unset;
            border-radius: unset;
            background-color: var(--fl-color-tab-selected-background);
        }


        // Define a shared block for the divider inner elements
        &__tabset_tab_divider_inner {
            height: 100%;
        }

        // When the tabset is selected, update the variable for all children
        &__tabset-selected {
            --fl-tab-divider-bg: var(--flexlayout-tab-divider-bg, var(--fl-color-tabset-background-selected));
        }
        &__tabset-maximized {
            --fl-tab-divider-bg: var(--flexlayout-tab-divider-bg, var(--fl-color-tabset-background-maximized));
        }
        
        // Grouping by Position (Top vs Bottom)
        &__tabset_tabbar_outer {
            &_top {
                .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
                    border-bottom-right-radius: var(--fl-tab-button-radius);
                    // Use a CSS variable that we'll update based on the tabset state
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }

                .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
                    border-bottom-left-radius: var(--fl-tab-button-radius);
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }
            }

            &_bottom {
                .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
                    border-top-right-radius: var(--fl-tab-button-radius);
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }

                .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
                    border-top-left-radius: var(--fl-tab-button-radius);
                    background-color: var(--fl-tab-divider-bg, var(--fl-color-tabset-background));
                }
            }
        }


        &__splitter {
            transition: background-color 0.2s;

            &:hover {
                border-radius: 0;
            }
        }

        &__border_button {
            border-radius: var(--fl-border-button-radius);
            margin: 3px;
            padding: 3px 8px;

            &--selected {
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            }
        }

        &__border_sizer {
            padding-bottom: 8px;
        }

        &__popup_menu_container {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--fl-color-2);
            padding: 4px;
        }

        &__popup_menu_item {
            border-radius: 4px;
            padding: 6px 8px;

            &:hover {
                background-color: var(--fl-color-1);
            }
        }
    }
}

@mixin alpha_rounded_theme {
    $color_text: black !default; // Slate 800
    $color_background: #e9eef6 !default; // Slate 50
    $color_base: #ffffff !default;
    $color_1: #f1f5f9 !default; // Slate 100
    $color_2: #e2e8f0 !default; // Slate 200
    $color_3: #cbd5e1 !default; // Slate 300
    $color_4: #94a3b8 !default; // Slate 400
    $color_5: #64748b !default; // Slate 500
    $color_6: #475569 !default; // Slate 600

    $color_drag1: rgb(95, 134, 196) !default;
    $color_drag2: rgb(119, 166, 119) !default;
    $color_drag1_background: rgba(59, 130, 246, 0.1) !default;
    $color_drag2_background: rgba(16, 185, 129, 0.075) !default;

    $font_size: medium !default;
    $font_family: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif !default;
    $font_weight: 500 !default;

    .flexlayout {
        &__layout {

            --fl-color-text: var(--flexlayout-color-text, #{$color_text});
            --fl-color-background: var(--flexlayout-color-background, #{$color_background});
            --fl-color-base: var(--flexlayout-color-base, #{$color_base});
            --fl-color-1: var(--flexlayout-color-1, #{$color_1});
            --fl-color-2: var(--flexlayout-color-2, #{$color_2});
            --fl-color-3: var(--flexlayout-color-3, #{$color_3});
            --fl-color-4: var(--flexlayout-color-4, #{$color_4});
            --fl-color-5: var(--flexlayout-color-5, #{$color_5});
            --fl-color-6: var(--flexlayout-color-6, #{$color_6});
            --fl-color-drag1: var(--flexlayout-color-drag1, #{$color_drag1});
            --fl-color-drag2: var(--flexlayout-color-drag2, #{$color_drag2});
            --fl-color-drag1-background: var(--flexlayout-color-drag1-background, #{$color_drag1_background});
            --fl-color-drag2-background: var(--flexlayout-color-drag2-background, #{$color_drag2_background});

            --fl-font-size: var(--flexlayout-font-size, #{$font_size});
            --fl-font-family: var(--flexlayout-font-family, #{$font_family});
            --fl-font-weight: var(--flexlayout-font-weight, #{$font_weight});

            --fl-splitter-size: var(--flexlayout-splitter-size, 8px);
            --fl-splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
            --fl-splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);

            --fl-color-overflow: var(--flexlayout-color-overflow, var(--fl-color-4));
            --fl-color-icon: var(--flexlayout-color-icon, var(--fl-color-4));
            --fl-color-focus: var(--flexlayout-color-focus, #3b7de7); // keyboard focus ring

            --fl-color-tabset-background: var(--flexlayout-color-tabset-background, white);
            --fl-color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--fl-color-tabset-background));
            --fl-color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--fl-color-tabset-background));
            --fl-color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, white);

            --fl-color-border-tab-content: var(--flexlayout-color-border-tab-content, white);
            --fl-color-border-background: var(--flexlayout-color-border-background, var(--fl-color-background));
            --fl-color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--fl-color-background));

            --fl-color-border: var(--flexlayout-color-border, var(--fl-color-text));

            --fl-color-tab-content: var(--flexlayout-color-tab-content, white);
            --fl-color-tab-selected: var(--flexlayout-color-tab-selected, #3b7de7);
            --fl-color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--fl-color-2));
            --fl-color-tab-unselected: var(--flexlayout-color-tab-unselected, var(--fl-color-4));
            --fl-color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, var(--fl-color-1));
            --fl-color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--fl-color-text));
            --fl-color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--fl-color-3));

            --fl-color-border-tab-selected: var(--flexlayout-color-border-tab-selected, #3b7de7);
            --fl-color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--fl-color-2));
            --fl-color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, var(--fl-color-4));
            --fl-color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--fl-color-1));

            --fl-color-splitter: var(--flexlayout-color-splitter, var(--fl-color-background));
            --fl-color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--fl-color-3));
            --fl-color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--fl-color-3));
            --fl-color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--fl-color-3));

            --fl-color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--fl-color-3));
            --fl-color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--fl-color-base));
            --fl-color-drag-rect: var(--flexlayout-color-drag-rect, var(--fl-color-text));

            --fl-color-popup-border: var(--flexlayout-color-popup-border, var(--fl-color-2));
            --fl-color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--fl-color-text));
            --fl-color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--fl-color-base));
            --fl-color-popup-selected: var(--flexlayout-color-popup-selected, var(--fl-color-drag1));
            --fl-color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--fl-color-1));

            --fl-color-edge-marker: var(--flexlayout-color-edge-marker, var(--fl-color-3));
            --fl-color-edge-icon: var(--flexlayout-color-edge-icon, var(--fl-color-6));

            --fl-color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(0, 0, 0, 0.1));
            --fl-color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(0, 0, 0, 0.2));

            --fl-size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 4px);

            --fl-color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--fl-color-1));
            --fl-color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--fl-color-tabset-background));
            --fl-tab-button-radius: var(--flexlayout-tab-button-radius, 16px);
            --fl-border-button-radius: var(--flexlayout-border-button-radius, 16px);

            --fl-color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
            --fl-color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
            --fl-color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
            --fl-tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
        }
    }
}

@mixin alpha_rounded_theme_overrides {
    .flexlayout {
        &__tabset {
            padding: 2px;
            border-radius: 12px;
        }
        
        &__splitter_border .flexlayout__splitter_handle {
            visibility: visible;
        }

        &__float_window  {
            background-color: var(--fl-color-2);
        }

        &__float_window_header {
            background-color: var(--fl-color-2);
            border-bottom: none;
        }
        
        &__tab_border {
            border-radius: 12px;
        }

        &__border_tab_contents {
            border-radius: var(--fl-tab-button-radius);
        }

        &__tab_button {
            border-radius: var(--fl-tab-button-radius);
            padding: 4px 12px;
            margin: 2px;
        }

        &__border_button {
            border-radius: var(--fl-border-button-radius);
            padding: 4px 12px;
            margin: 2px;
        }

        &__border_sizer {
            padding-bottom: 10px;
        }

        &__popup_menu_container {
            border-radius: 8px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--fl-color-2);
            padding: 6px;
        }

        &__popup_menu_item {
            border-radius: 6px;
            padding: 8px 12px;

            &:hover {
                background-color: var(--fl-color-1);
            }
        }
    }
}