@mixin absoluteFill {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.flexlayout {
    &__layout {
        @include absoluteFill;
        overflow: hidden;
    }

    &__splitter {
        background-color: var(--color-splitter);
        @include splitter_mixin;

        @media (hover: hover) {
            &:hover {
                background-color: var(--color-splitter-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;
            background-color: var(--color-splitter-drag);
            @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;
        background-color: var(--color-edge-marker);
        pointer-events: none;
        display:flex;
        align-items: center;
        justify-content: center;
    }

    &__drag_rect {
        position: absolute;
        cursor: move;
        color: var(--color-drag-rect);
        background-color: var(--color-drag-rect-background);
        border: 2px solid var(--color-drag-rect-border);
        // 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.3em 1em;
        word-wrap: break-word;
        font-size: var(--font-size);
        font-family: var(--font-family);
    }

    &__tabset {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: var(--color-tabset-background);
        box-sizing: border-box;
        font-size: var(--font-size);
        font-family: var(--font-family);
        @include tabset_mixin;

        &_tab_divider {
            width: 4px;
            @include tabset_tab_divider_mixin;
        }

        &_content {
            display: flex;
            flex-grow: 1;
            align-items: center;
            justify-content: center;
        }

        &_header {
            // tabset header bar
            display: flex;
            align-items: center;
            padding: 3px 3px 3px 5px;
            box-sizing: border-box;
            border-bottom: 1px solid var(--color-tabset-divider-line);
            color: var(--color-tabset-header);
            background-color: var(--color-tabset-header-background);
            @include tabset_header_mixin;

            &_content {
                flex-grow: 1;
            }
        }

        &_tabbar {
            &_outer {
                // tabset tabbar outer
                box-sizing: border-box;
                background-color: var(--color-tabset-background);
                overflow: hidden;
                display: flex;
                @include tabset_tabbar_mixin;
            }

            &_outer_top {
                border-bottom: 1px solid var(--color-tabset-divider-line);
            }

            &_outer_bottom {
                border-top: 1px solid var(--color-tabset-divider-line);
            }

            &_inner {
                // tabset tabbar inner
                position: relative;
                box-sizing: border-box;
                display: flex;
                flex-grow: 1;
                overflow: hidden;

                &_tab_container {
                    display: flex;
                    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 {
            background-color: var(--color-tabset-background-selected);
            @include tabset_selected_mixin;
        }

        &-maximized {
            background-color: var(--color-tabset-background-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;
        background-color: var(--color-background);
        color: var(--color-text);

        &_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;

            &_stretch {
                background-color: transparent;
                color:var(--color-tab-selected);
                width: 100%;
                padding: 3px 0em;
                text-wrap: nowrap;
                display: flex;
                gap: 0.3em;
                align-items: center;
                box-sizing: border-box;
                cursor: pointer;
                @include tab_button_stretch_mixin;

                @media (hover: hover) {
                    &:hover {
                        color:var(--color-tab-selected);
                        @include tab_button_stretch_hovered_mixin;
                    }
                }
            }

            &--selected {
                background-color:var(--color-tab-selected-background);
                color:var(--color-tab-selected);
                @include tab_button_selected_mixin;
            }
            @media (hover: hover) {
                &:hover {
                    background-color:var(--color-tab-selected-background);
                    color:var(--color-tab-selected);
                    @include tab_button_hovered_mixin;
                }
            }

            &--unselected {
                background-color:var(--color-tab-unselected-background);
                color:var(--color-tab-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-tab-textbox);
                background-color: var(--color-tab-textbox-background);
                border: 1px inset var(--color-1);
                border-radius: 3px;
                width: 10em;
            }

            &_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: var(--color-overflow);
                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: 5px;
                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);
        color: var(--color-border);
        background-color: var(--color-border-background);
        @include border_mixin;

        &_top {
            border-bottom: 1px solid var(--color-border-divider-line);
            align-items: center;
        }

        &_bottom {
            border-top: 1px solid var(--color-border-divider-line);
            align-items: center;
        }

        &_left {
            border-right: 1px solid var(--color-border-divider-line);
            align-content: center;
            flex-direction: column;
        }

        &_right {
            border-left: 1px solid var(--color-border-divider-line);
            align-content: center;
            flex-direction: column;
        }

        &_inner {
            position: relative;
            box-sizing: border-box;
            display: flex;
            overflow: hidden;
            flex-grow: 1;

            &_tab_container {
                white-space: nowrap;
                display: flex;
                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);
                }
            }
        }

        &_tab_divider {
            width: 4px;
            @include border_tab_divider_mixin;
            }

        &_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 {
                background-color: var(--color-border-tab-selected-background);
                color: var(--color-border-tab-selected);
                @include border_button_selected_mixin;
            }
            @media (hover: hover) {
                &:hover {
                    background-color: var(--color-border-tab-selected-background);
                    color: var(--color-border-tab-selected);
                    @include border_button_hovered_mixin;
                }
            }

            &--unselected {
                background-color: var(--color-border-tab-unselected-background);
                color: var(--color-border-tab-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: var(--color-overflow);
                    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-popup-border);
            color: var(--color-popup-unselected);
            background: var(--color-popup-unselected-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);
    }
}