@forward "../../../../node_modules/@interopio/theme/dist/io.platform.css";
@forward "channels-selectors";

:root,
.io-variables {
    /* === Workspaces App === */
    --workspace-general-font-size: var(--io-font-size);                        /* Font size for the Workspaces App. */
    --workspace-general-font-family: var(--io-font-family);                    /* Font family for the Workspaces App. */
    --workspace-general-background: var(--base-surface-frame-background);      /* Background for the Workspaces App. */
    --workspace-general-border: 1px solid var(--base-surface-frame-border);    /* Border for the Workspaces App. */

    /* === Workspace Splitters === */
    --workspace-splitter-color-inactive: var(--resizer-background);         /* Color for the Workspace splitters when inactive. */
    --workspace-splitter-color-hover: var(--resizer-background-hover);      /* Color for the Workspace splitters when hovered. */
    --workspace-splitter-color-active: var(--resizer-background-active);    /* Color for the Workspace splitters when active. */
    --workspace-splitter-cursor-vertical: ns-resize;                        /* Cursor style for vertical Workspace splitters. */
    --workspace-splitter-cursor-horizontal: ew-resize;                      /* Cursor style for horizontal Workspace splitters. */

    /* === Workspace Drop Target === */
    --workspace-drop-target-color: var(--io-blue-700);    /* Color for the Workspace drop target. */
    --workspace-drop-target-opacity: 0.35;                /* Opacity for the Workspace drop target. */
    --workspace-drop-tab-placeholder-width: 120px;        /* Width of the tab placeholder for the Workspace drop target. */

   /* === Workspace Header === */
    --workspace-header-background-color: var(--workspace-header-background);               /* Background color for the Workspace header. */
    --workspace-header-bottom-border: 2px solid var(--workspace-tab-background-active);    /* Bottom border for the Workspace header. */
    --workspace-header-height: 40px;                                                       /* Height for the Workspace header. */
    --workspace-header-gap: 4px;                                                           /* Gap between the Workspace header elements (logo, tabs, controls). */
    --workspace-header-tabs-padding: 4px 0 0 4px;                                          /* Padding for the Workspace tabs in the Workspace header. */
    --workspace-header-tabs-add-margin: 2px 0 0 0;                                         /* Margin for the "Add Workspace" button. */
    --workspace-header-tabs-start-point: 8px;                                              /* Offset before the first Workspace tab. */
    --workspace-header-move-area-min-width: 12px;                                          /* Minimum width for the Workspace move area. */

    /* === Workspace Header System Buttons === */
    --workspace-header-system-controls-background-active: var(--icon-background-hover);    /* Background for the Workspace header system buttons when active. */
    --workspace-header-system-controls-background-close: var(--io-red-700);                /* Background for the "Close" system button. */
    --workspace-header-system-controls-text-close: white;                                  /* Text color for the "Close" system button. */
    --workspace-header-system-controls-height: 38px;                                       /* Height for the Workspace header system buttons. */
    --workspace-header-system-controls-width: 48px;                                        /* Width for the Workspace header system buttons. */
    --workspace-header-system-controls-gap: 0;                                             /* Gap between the Workspace header system buttons. */
    --workspace-header-system-controls-padding: 0;                                         /* Padding for the Workspace header system buttons. */
    --workspace-header-system-controls-radius: 0;                                          /* Border radius for the Workspace header system buttons. */

    /* === Workspace Tabs === */
    --workspace-tab-radius: var(--tabs-radius);                                    /* Border radius for the Workspace tabs. */
    --workspace-tab-width: 192px;                                                  /* Width for the Workspace tabs. */
    --workspace-tab-min-width: 40px;                                               /* Minimum width for the Workspace tabs. */
    --workspace-tab-max-width: 192px;                                              /* Maximum width for the Workspace tabs. */
    --workspace-tab-separator-color: var(--base-border-separator);                 /* Color for the separator between the Workspace tabs and the "Add Workspace" button. */
    --workspace-tab-separator-height: 12px;                                        /* Height for the separator between the Workspace tabs and the "Add Workspace" button. */
    --workspace-tab-gap: 2px;                                                      /* Gap between Workspace tabs. */
    --workspace-tab-title-color: var(--text-states-default);                       /* Color for the Workspace tab title. */
    --workspace-tab-title-color-active: var(--text-states-active);                 /* Color for the Workspace tab title when active. */
    --workspace-tab-title-margin: 0 0 0 6px;                                       /* Margin for the Workspace tab title. */
    --workspace-tab-background-hover: var(--workspace-tabs-background-hover);      /* Background color for the Workspace tabs when hovered. */
    --workspace-tab-background-active: var(--workspace-tabs-background-active);    /* Background color for the Workspace tabs when active. */
    --workspace-tab-margin: 0 3px 0 0;                                             /* Margin for the Workspace tabs. */
    --workspace-tab-padding: 6px 12px;                                             /* Padding for the Workspace tabs. */
    --workspace-tab-padding-active: 9px 12px;                                      /* Padding for the Workspace tabs when active. */
    --workspace-tab-bottom-radius: 0;                                              /* Border radius for the bottom corners of the Workspace tabs. */
    --workspace-tab-bottom-corners: block;                                         /* Set to `block` to display the additional rounded corners at the bottom of the active Workspace tab. Set to `none` to remove the additional rounded corners. */
    --workspace-tab-text-mask: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0) 95%,
        rgba(0, 0, 0, 0) 100%
    );                                                                             /* Used for text fade-out effect on text overflow in the Workspace tabs. */


    /* === Workspace Tabs Responsive Behavior === */
    --workspace-tab-width-hide-button-close: 70px;    /* The "Close" button of the Workspace tab will be hidden when the Workspace tab shrinks to the specified width. */
    --workspace-tab-width-hide-button-lock: 88px;     /* The "Lock" button of the Workspace tab will be hidden when the Workspace tab shrinks to the specified width. */
    --workspace-tab-width-hide-title: 18px;           /* The title of the Workspace tab will be hidden when the Workspace tab shrinks to the specified width. */

   /* === Workspace Windows (windows and window groups inside Workspaces) === */
    --workspace-window-header-tabs-start-point: 4px;                                   /* Offset for the first tab in the headers of Workspace window groups. */
    --workspace-window-header-gap: 4px;                                                /* Gap between the elements in the headers of Workspace window groups (tabs, "Add App" button, move area, system buttons). */
    --workspace-window-header-height: 38px;                                            /* Height for the headers of Workspace window groups. */
    --workspace-window-tab-background: var(--workspace-tabs-background-active);        /* Background for the tabs of Workspace windows. */
    --workspace-window-tab-background-active: var(--window-tabs-background-active);    /* Background for the tabs of Workspace windows when active. */
    --workspace-window-tab-gap: 2px;                                                   /* Gap between the items in the Workspace window tabs. */
    --workspace-window-tab-radius: var(--tabs-radius);                                 /* Border radius for the tab corners of Workspace windows. */
    --workspace-window-tab-width: initial;                                             /* Width for the Workspace window tabs. */
    --workspace-window-tab-min-width: 60px;                                            /* Minimum width for the Workspace window tabs. */
    --workspace-window-tab-max-width: 150px;                                           /* Maximum width for the Workspace window tabs. */
    --workspace-window-tab-margin: 0 3px 0 0;                                          /* Margin for the Workspace window tabs. */
    --workspace-window-tab-padding: 4px 8px;                                           /* Padding for the Workspace window tabs. */
    --workspace-window-tab-title-color: var(--text-states-default);                    /* Color for the titles of Workspace window tabs. */
    --workspace-window-tab-title-color-active: var(--text-states-active);              /* Color for the titles of Workspace window tabs when active. */
    --workspace-window-tab-title-margin: 0;                                            /* Margin for the titles of Workspace window tabs. */
    --workspace-window-controls-gap: 4px;                                              /* Gap between the buttons in the Workspace window group ("Extract", "Maximize"/"Restore"). */
    --workspace-window-controls-padding: 0 8px;                                        /* Padding for the container of the "Extract" and "Maximize"/"Restore" buttons in the Workspace window group. */

    /* === Workspace Window Channel Selector === */
    --workspace-channel-icon-color-default: var(--icon-color-default);    /* Default color for the Channel Selector icon in the Workspace window tabs. */
    --workspace-channel-icon-color-hover: var(--icon-color-hover);        /* Color for the Channel Selector icon in the Workspace window tabs when hovered. */
    --workspace-channel-icon-color-black: var(--io-neutrals-1000);        /* Text color for the Channel Selector icon to be used with light icon backgrounds to achieve higher contrast ration. */
    --workspace-channel-icon-color-white: var(--io-neutrals-0);           /* Text color for the Channel Selector icon to be used with dark icon backgrounds to achieve higher contrast ration. */
    --workspace-channel-icon-wrapper-size: 16px;                          /* Size (width and height) for the Channel Selector container. */
    --workspace-channel-icon-size: 14px;                                  /* Size (width and height) for the Channel Selector icon in the Workspace window tabs. */
    --workspace-channel-icon-radius: var(--base-radius-default);          /* Border radius for the corners of the Channel Selector icon in the Workspace window tabs. */

    /* === Workspace Pin Icon === */
    /* Default SVG icon for pinned Workspaces. */
    --workspace-pin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M480 208l-176-172.8c-25.6-28.8-70.4-28.8-96 0l-172.8 172.8c-28.8 28.8-28.8 70.4 0 99.2l172.8 172.8c28.8 28.8 70.4 28.8 99.2 0l172.8-172.8c28.8-28.8 28.8-70.4 0-99.2zM396.8 172.8l-28.8 28.8-38.4 41.6-57.6-60.8 67.2-67.2 57.6 57.6zM233.6 57.6c12.8-12.8 35.2-12.8 48 0l32 35.2-67.2 67.2-57.6-57.6 44.8-44.8zM275.2 457.6c-12.8 12.8-35.2 12.8-48 0l-169.6-176c-12.8-12.8-12.8-35.2 0-48l105.6-105.6 220.8 220.8-108.8 108.8zM451.2 281.6l-41.6 41.6-57.6-57.6 64-67.2 35.2 35.2c12.8 12.8 12.8 35.2 0 48z'%3E%3C/path%3E%3C/svg%3E%0A");
    --workspace-pin-icon-size: 16px;    /* Size (width and height) for the icons of pinned Workspaces. */

    /* === Workspaces App Logo === */
    /* Default icon for the logo of the Workspaces App. */
    --workspace-logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.25 6.8l-4.47 4.53-2.93-2.97c-.2-.2-.2-.52 0-.72L6.96 3.47l-1.19-1.21-.11.11.09-.13L1.64 6.41c-.86.87-.86 2.28 0 3.15l4.13 4.18 5.66-5.73-1.19-1.21h0ZM8.02 13.59l-1.19 1.21 1.19 1.21 1.19-1.21-1.19-1.21ZM8.01 0l-1.19 1.21 1.19 1.21 1.19-1.21-1.19-1.21ZM14.36 6.44l-4.11-4.17-5.66 5.73 1.19 1.21 4.47-4.53 2.93 2.97c.2.2.2.52 0 .72l-4.11 4.16 1.19 1.21 2.79-2.83 1.31-1.32c.86-.87.86-2.27 0-3.15h-0 0s0 0 0 0Z'/%3E%3C/svg%3E");
    --workspace-logo-icon-color-default: var(--workspace-channel-icon-color-default);    /* Default color for the Workspaces App logo icon. */
    --workspace-logo-icon-color-hover: var(--workspace-channel-icon-color-hover);        /* Color for the Workspaces App logo icon when hovered. */
    --workspace-logo-icon-size: 16px;                                                    /* Size (width and height) for the Workspaces App logo icon. */
    --workspace-logo-wrapper-padding: 4px 0 0 0;                                         /* Padding for the Workspaces App logo container. */
    --workspace-logo-wrapper-height: 32px;                                               /* Height for the Workspaces App logo container. */
    --workspace-logo-wrapper-width: 32px;                                                /* Width for the Workspaces App logo container. */

    /* === Workspace Dialogs & Popups === */
    --workspace-dialog-backdrop-background: rgba(0, 0, 0, 0.65);                /* Background color for the blurred background of Workspace dialogs. */
    --workspace-dialog-min-width: 450px;                                   /* Minimum width for Workspace dialogs. */
    --workspace-dialog-max-width: 540px;                                   /* Maximum width for Workspace dialogs. */
    --workspace-popup-panel-shadow: 0 3px 11px 6px rgba(0, 0, 0, 0.16);    /* Drop shadow for the Workspace popups. */
    --workspace-popup-top-position: 24px;                                  /* Top position for the Workspace popup relative to the top border of the respective button that triggers the popup. */
    --workspace-popup-item-gap: var(--list-item-inner-gap);                /* Gap between the items in Workspace popups. */


    /* === "Add App" Popup === */
    --workspace-popup-app-max-height: 80vh;                     /* Maximum height for the "Add App" Workspace popup. */
    --workspace-popup-app-padding: 0 16px;                      /* Padding for the "Add App" Workspace popup. */
    --workspace-popup-app-title-margin: 0;                      /* Margin for the title of the "Add App" Workspace popup. */
    --workspace-popup-app-title-lh: 24px;                       /* Line height for the title of the "Add App" Workspace popup. */
    --workspace-popup-app-placement-section-font-size: 12px;    /* Font size for the "App Placement" section in the "Add App" Workspace popup. */
    --workspace-popup-app-placement-section-lh: 32px;           /* Line height for the "App Placement" section in the "Add App" Workspace popup. */

    /* === "Add Workspace" Popup === */
    --workspace-popup-wsp-max-height: 80vh;                                     /* Maximum height for the "Add Workspace" Workspace popup. */
    --workspace-popup-wsp-title-padding: 16px 16px 0 16px;                      /* Padding for the title of the "Add Workspace" Workspace popup. */
    --workspace-popup-wsp-title-lh: 24px;                                       /* Line height for the title of the "Add Workspace" Workspace popup. */
    --workspace-popup-wsp-separator: 1px solid var(--base-border-separator);    /* Thickness, color, and type for the section separator used in the "Add Workspace" Workspace popup. */

    /* === Workspace Settings Panel === */
    --workspace-settings-v-padding: 16px;               /* Vertical padding for the Workspace "Settings" panel. */
    --workspace-settings-h-padding: 16px;               /* Horizontal padding for the Workspace "Settings" panel. */
    --workspace-settings-section-gap: 8px;              /* Gap between the sections in the Workspace "Settings" panel. */
    --workspace-settings-width: 320px;                  /* Width for the Workspace "Settings" panel. */
    --workspace-settings-item-gap: 8px;                 /* Gap between the section items in the Workspace "Settings" panel. */
    --workspace-settings-max-height: 90vh;              /* Maximum height for the Workspace "Settings" panel. */
    --workspace-settings-title-panel-lh: 32px;          /* Line height for the title of the Workspace "Settings" panel. */
    --workspace-settings-title-section-lh: 24px;        /* Line height for the section titles of the Workspace "Settings" panel. */
    --workspace-settings-title-sub-section-lh: 16px;    /* Line height for the sub-section titles of the Workspace "Settings" panel. */

    /* === Workspace Loader === */
    --workspace-loader-wrapper-background: var(--base-surface-frame-background );    /* Background color for the Workspace loader wrapper. */
    --workspace-loader-wrapper-gap: 8px;                                             /* Gap between the items within the Workspace loader wrapper. */
    --workspace-loader-wrapper-width: 100%;                                          /* Width for the Workspace loader wrapper. */
    --workspace-loader-wrapper-height: 100%;                                         /* Height for the Workspace loader wrapper. */
    --workspace-loader-size: 32px;                                                   /* Size (width & height) the Workspace loading animation. */
    --workspace-loader-radius: 50%;                                                  /* Border radius for the Workspace loading animation. */
    --workspace-loader-text-color: var(--text-states-default);                       /* Text color for the Workspace loading animation. */
    --workspace-loader-background: var(--loader-background);                         /* Background color for the Workspace loading animation. */
    --workspace-loader-mask: var(--loader-background-mask);                          /* Overlay mask for the Workspace loading animation. */
    --workspace-loader-animation: var(--loader-animation);                           /* Animation style for the Workspace loading animation. */

    /* === Legacy "Add App" Button (displayed in an empty Workspace) === */
    --workspace-add-button-width: 24px;                         /* Width for the legacy "Add App" button. */
    --workspace-add-button-height: 24px;                        /* Height for the legacy "Add App" button. */
    --workspace-add-button-radius: 50%;                         /* Border radius for the legacy "Add App" button. */
    --workspace-add-button-color: var(--icon-color-default);    /* Color for the legacy "Add App" button. */
    --workspace-add-button-background: transparent;             /* Background for the legacy "Add App" button. */
    --workspace-add-button-icon-size: 16px;                     /* Size for the icon of the legacy "Add App" button. */
}

.light {
    --workspace-header-system-controls-background-active: var(--io-neutrals-150);
}

@mixin transition {
    transition-timing-function: cubic-bezier(0, 0, 0.15, 1);
    transition-duration: 120ms;
}

#root {
    display: flex;
    flex: 1;
    width: 100vw;
    max-width: stretch;
    height: 100vh;
    max-height: stretch;
}

.renderer-mode-keycolor,
.renderer-mode-transparent {
    border: var(--workspace-general-border);
}

body {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: var(--workspace-general-font-size);
    font-family: var(--workspace-general-font-family);
}

.io-panel {
    --panel-min-height: auto;
    box-shadow: var(--workspace-popup-panel-shadow);
}

.io-dialog {
    min-width: var(--workspace-dialog-min-width);
    max-width: var(--workspace-dialog-max-width);
}

.io-dialog-body {
    --dialog-box-vertical-gap: 8px;
}

.io-list-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* end section */

/* lm prefix from goldenlayout */
.lm {
    &_root {
        position: relative;
    }

    &_row {
        display: flex;
        background-color: var(--workspace-general-background);
    }

    &_content {
        position: relative;
    }

    &_dragging,
    &_dragging * {
        cursor: move;
        user-select: none;
    }

    &_tab,
    &_controls,
    &_header {
        display: flex;
        align-items: center;
    }

    &_header {
        gap: var(--workspace-window-header-gap);
        height: var(--workspace-window-header-height);
        padding-left: var(--workspace-window-header-tabs-start-point);
        background-color: var(--workspace-window-tab-background);
        position: relative;

        >* {
            flex-shrink: 0;
        }
    }

    &_logo {
        display: none;
    }

    &_controls {
        flex: 0 0 auto;
        gap: var(--workspace-window-controls-gap);
        padding: var(--workspace-window-controls-padding);

        li {
            &[hidden] {
                display: none;
            }
        }
    }

    &_tabs_controls {
        flex: 0 0 auto;
    }

    &_tabs {
        display: flex;
        flex: 0 1 auto;
        align-items: center;
        min-width: 0; /* allow flex children to shrink */
    }

    &_tab {
        position: relative;
        gap: var(--workspace-window-tab-gap);
        width: var(--workspace-window-tab-width);
        min-width: var(--workspace-window-tab-min-width);
        max-width: var(--workspace-window-tab-max-width);
        margin: var(--workspace-window-tab-margin);
        padding: var(--workspace-window-tab-padding);
        border-radius: var(--workspace-window-tab-radius);
        transition-property: background-color, color, box-shadow;
        @include transition;

        &::before {
            position: absolute;
            left: calc(2px * -1);
            width: 1px;
            height: var(--workspace-tab-separator-height);
            background-color: var(--workspace-tab-separator-color);
            content: "";
        }

        &:hover .lm_title {
            color: var(--workspace-window-tab-title-color-active);
        }

        &:first-of-type::before {
            background-color: transparent;
        }

        &:not(.lm_active):last-of-type::after {
            position: absolute;
            right: -1px;
            width: 1px;
            height: var(--workspace-tab-separator-height);
            background-color: var(--workspace-tab-separator-color);
            content: "";
        }

        button {
            flex-shrink: 0;
        }

        .wsp-tab-lock-icon,
        .wsp-tab-close-btn,
        .wsp-channels-link,
        .lm_close_tab {
            transform: scale(1);
            transition-property: all;
        }
    }

    &_title {
        flex-grow: 1;
        margin: var(--workspace-window-tab-title-margin);
        overflow: hidden;
        color: var(--workspace-window-tab-title-color);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &_active {
        background-color: var(--workspace-window-tab-background-active);

        .wsp-tab-corner-left,
        .wsp-tab-corner-right {
            display: var(--workspace-tab-bottom-corners);
        }

        .lm_title {
            color: var(--workspace-window-tab-title-color-active);
        }

        &::before,
        +.lm_tab::before {
            background-color: transparent;
        }
    }

    // Separator line (handle to change pane size)
    &_splitter {
        @include transition();
        position: relative;
        z-index: 20;
        background-color: var(--workspace-splitter-color-inactive);
        transition-property: background-color;

        &:hover {
            background-color: var(--workspace-splitter-color-hover);
        }

        &:active {
            background-color: var(--workspace-splitter-color-active);
        }
    }

    &_vertical {
        cursor: var(--workspace-splitter-cursor-vertical);
    }

    &_horizontal {
        cursor: var(--workspace-splitter-cursor-horizontal);
    }

    &_drag_handle {
        width: 100%;
        height: 100%;
    }

    &_workspace_controls:empty {
        display: none;
    }

    &_dropTargetIndicator {
        position: absolute;
        z-index: 20;
        overflow: hidden;
        background-color: var(--workspace-drop-target-color);
        opacity: var(--workspace-drop-target-opacity);
        transition-property: all;
    }

    &_drop_tab_placeholder {
        width: var(--workspace-drop-tab-placeholder-width);
    }

    &_inner {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        min-width: 16px;
        height: 100%;
        border-radius: var(--workspace-tab-radius);
    }

    &_dragProxy {
        position: absolute;
        z-index: 30;
        cursor: move;
    }
}

.header_double {
    --workspace-window-header-height: var(--workspace-header-height);
    --workspace-window-tab-background: var(--workspace-header-background-color);
    gap: var(--workspace-header-gap);
    padding-left: var(--workspace-header-tabs-start-point);
    border-bottom: var(--workspace-header-bottom-border);

    .lm {
        &_logo {
            --icon-background-hover: var(--workspace-header-system-controls-background-active);
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--workspace-logo-wrapper-width);
            height: var(--workspace-logo-wrapper-height);
            padding: var(--workspace-logo-wrapper-padding);

            &:empty {
                display: none;
            }
        }

        &_tabs {
            padding: var(--workspace-header-tabs-padding);
        }

        &_tab {
            gap: var(--workspace-tab-gap);
            justify-content: center;
            width: var(--workspace-tab-width);
            min-width: var(--workspace-tab-min-width);
            max-width: var(--workspace-tab-max-width);
            margin: var(--workspace-tab-margin);
            padding: var(--workspace-tab-padding);
            border-radius: var(--workspace-tab-radius);

            container-type: inline-size;
            container-name: header-tab;

            &:hover:not(.lm_active) {
                padding: var(--workspace-tab-padding);
                background-color: var(--workspace-tab-background-hover);
            }
        }

        &_pinned {
            --workspace-tab-width: auto;

            .wsp-tab {
                flex: 0 0 auto;
            }
        }

        &_title {
            --workspace-window-tab-title-color: var(--workspace-tab-title-color);
            margin: var(--workspace-tab-title-margin);
            text-overflow: initial;
            mask-image: var(--workspace-tab-text-mask);
        }

        &_active {
            padding: var(--workspace-tab-padding-active);
            border-bottom-right-radius: var(--workspace-tab-bottom-radius);
            border-bottom-left-radius: var(--workspace-tab-bottom-radius);
            background-color: var(--workspace-tab-background-active);

            &::after {
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--workspace-tab-background-active);
                content: "";
            }

            .lm_title {
                --workspace-window-tab-title-color-active: var(--workspace-tab-title-color-active);
            }
        }

        &_controls {
            --workspace-window-controls-gap: var(--workspace-header-system-controls-gap);
            --workspace-window-controls-padding: var(--workspace-header-system-controls-padding);
            --icon-background-hover: var(--workspace-header-system-controls-background-active);

            .lm_maximise,
            .lm_minimise,
            .lm_restore,
            .lm_close {
                .io-btn-icon {
                    width: var(--workspace-header-system-controls-width);
                    height: var(--workspace-header-system-controls-height);
                    --buttons-border-radius: var(--workspace-header-system-controls-radius);
                    --icon-radius: var(--workspace-header-system-controls-radius);
                }

            }

            .lm_close:hover {
                --icon-color-hover: var(--workspace-header-system-controls-text-close);
                --icon-background-hover: var(--workspace-header-system-controls-background-close);
            }
        }

        &_workspace_controls {
            --icon-background-hover: var(--workspace-header-system-controls-background-active);

            flex: 0 0 auto;
            margin: var(--workspace-header-tabs-add-margin);
        }
    }
}

.wsp-logo {
    display: block;
    width: var(--workspace-logo-icon-size);
    height: var(--workspace-logo-icon-size);
    background-color: var(--workspace-logo-icon-color-default);
    mask-image: var(--workspace-logo-icon);
    mask-size: var(--workspace-logo-icon-size);
    mask-repeat: no-repeat;
    mask-position: center;
}

.wsp-tab,
.wsp-tab-window {
    display: flex;
    flex: 1 1 auto;
    gap: var(--workspace-tab-gap);
    align-items: center;
    min-width: 0;
}

.wsp-tab-corner {

    &-left,
    &-right {
        position: absolute;
        bottom: 0;
        z-index: 1;
        display: none;
        width: 6px;
        height: 6px;
        overflow: hidden;
        transition-duration: 80ms;
        transition-property: box-shadow;

        &::before {
            position: absolute;
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            content: "";
        }
    }

    &-left {
        left: -6px;

        &::before {
            right: 0;
            bottom: 0;
            box-shadow: 3px 3px 0 0 var(--workspace-tab-background-active);
        }
    }

    &-right {
        right: -6px;

        &::before {
            bottom: 0;
            left: 0;
            box-shadow: -3px 3px 0 0 var(--workspace-tab-background-active);
        }
    }
}

.wsp-external-pin-icon {
    width: var(--workspace-pin-icon-size);
    height: var(--workspace-pin-icon-size);
    mask-image: var(--workspace-pin-icon);
    mask-size: var(--workspace-pin-icon-size);
    background-color: var(--workspace-channel-icon-color-default);
    mask-repeat: no-repeat;
    mask-position: center;

    i {
        display: none;
    }
}

.wsp-channels-link {
    flex-shrink: 0;
    width: var(--workspace-channel-icon-wrapper-size);
    height: var(--workspace-channel-icon-wrapper-size);
    border-radius: var(--workspace-channel-icon-radius);
    overflow: hidden;
    transition-duration: 120ms;
    transition-property: background-color, color, transform, width;

    i {
        font-size: var(--workspace-channel-icon-size);
    }

    &[hidden] {
        display: none;
    }

    &:hover {
        color: var(--workspace-channel-icon-color-hover);
    }

    &.black-link-icon,
    &.black-link-icon:hover {
        color: var(--workspace-channel-icon-color-black);
    }

    &.white-link-icon,
    &.white-link-icon:hover {
        color: var(--workspace-channel-icon-color-white);
    }
}

.move_area {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: var(--workspace-header-move-area-min-width);
}

.header_double .move_area {
    -webkit-app-region: drag;
}

.workspaces-system-popup {
    position: fixed;
    z-index: 100;
    width: auto;
    height: auto;
    margin-top: var(--workspace-popup-top-position);
    background-color: transparent;
    visibility: hidden;
    user-select: none;
}

.renderer-mode-transparent {
    .lm {
        &_row {
            background-color: transparent;
        }
    }
}

.renderer-mode-keycolor {
    .lm_dropTargetIndicator {
        opacity: 1;
    }

    .io-panel,
    .add-workspace,
    .add-application,
    .save-workspace,
    .lock-options-list,
    .workspace-tab-popup {
        border-radius: 0;
        box-shadow: none;
    }
}

.workspace-tab-popup .io-panel {
    --panel-v-padding: 4px;
    --panel-h-padding: 0;
    --panel-gap: var(--workspace-popup-item-gap);
}

.io-panel {

    &.save-workspace,
    &.add-application,
    &.add-workspace {
        --panel-gap: var(--workspace-popup-item-gap);
    }

    &.add-workspace {
        --panel-v-padding: 4px;
        --panel-h-padding: 0;
    }

    // need into web for now
    &.save-workspace {
        --panel-h-padding: 16px;
        --panel-v-padding: 16px;
        --panel-max-height: var(--workspace-popup-wsp-max-height);
    }

    &.add-application {
        --panel-h-padding: 0;
        --panel-max-height: var(--workspace-popup-app-max-height);
    }

    &.lock-options-list {
        --panel-gap: var(--workspace-popup-item-gap);
        --panel-v-padding: var(--workspace-settings-v-padding);
        --panel-h-padding: var(--workspace-settings-h-padding);
        --panel-max-height: var(--workspace-settings-max-height);
        width: var(--workspace-settings-width);
        overflow: auto;
    }
}

.add-application {

    >div,
    >p,
    >h1 {
        padding: var(--workspace-popup-app-padding);
    }

    h1 {
        margin-bottom: var(--workspace-popup-app-title-margin);
        line-height: var(--workspace-popup-app-title-lh);
    }

    p {
        font-size: var(--workspace-popup-app-placement-section-font-size);
        line-height: var(--workspace-popup-app-placement-section-lh);
    }

    .io-list {
        overflow: auto;
    }
}

.add-workspace {
    .io-list {
        overflow: auto;
    }

    >h1 {
        padding: var(--workspace-popup-wsp-title-padding);
        line-height: var(--workspace-popup-wsp-title-lh);
    }

    .wsp-add-new {
        position: sticky;
        bottom: 0;
        border-top: var(--workspace-popup-wsp-separator);
        background-color: var(--panel-background);
    }
}

.wsp-add-apps-buttons {
    display: flex;
    gap: var(--workspace-tab-gap);

    .io-btn {
        width: 100%;
    }
}

.wsp-popup-panel-footer {
    display: flex;
    align-items: center;
    justify-content: end;
}

.wsp-settings-gird {
    display: grid;
    gap: var(--workspace-settings-item-gap);
}

.lock-options-list {
    .io {
        &-title-large {
            line-height: var(--workspace-settings-title-panel-lh);
        }

        &-title {
            line-height: var(--workspace-settings-title-section-lh);
        }

        &-title-semibold {
            padding-top: var(--workspace-settings-title-sub-section-lh);
            color: var(--text-inactive-tertiary);
        }

        &-toggle {
            flex-grow: 1;
            justify-content: space-between;
        }
    }

    .wsp-popup-back {
        position: static;
    }
}

.wsp-empty-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: var(--workspace-general-background);

    &:has(.io-btn-icon) {
        .add-button::before {
            content: none;
        }

        ;
    }
}

.workspaces-frame-system-buttons {
    display: flex;
    flex-direction: row;
}

.workspace-window-tab {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--workspace-window-tab-gap);
}

.group-header-buttons-container {
    display: flex;
    flex-direction: row;
}

.loading-animation {
    display: flex;
    width: var(--workspace-loader-wrapper-width);
    height: var(--workspace-loader-wrapper-height);
    background-color: var(--workspace-loader-wrapper-background);

    .wrapper {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: var(--workspace-loader-wrapper-gap);
        align-items: center;
        justify-content: center;

        .inner {
            width: var(--workspace-loader-size);
            height: var(--workspace-loader-size);
            border-radius: var(--workspace-loader-radius);
            background: var(--workspace-loader-background);
            animation: var(--workspace-loader-animation);
            mask-image: var(--workspace-loader-mask);
        }

        .mid {
            display: none;
        }

        .text {
            overflow: hidden;
            color: var(--workspace-loader-text-color);
            text-align: center;
            text-overflow: ellipsis;
        }
    }
}

/*  This section of css is only for backward compatibility  with old Workspaces
    However, you can restyling with css variables that is dedicated to it
*/

.add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--workspace-add-button-width);
    height: var(--workspace-add-button-height);
    padding: 0;
    border: 0;
    border-radius: var(--workspace-add-button-radius);
    color: var(--workspace-add-button-color);
    background-color: var(--workspace-add-button-background);
    transition-property: background-color, border-color, color;

    &:before {
        font-weight: normal;
        font-size: var(--workspace-add-button-icon-size);
        font-family: "io-icons";
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-transform: none;
        content: "\e90d";
        speak: never;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

.io-connect-external-popup {
    overflow: hidden;
    background-color: transparent;

    .io-panel.lock-options-list {
        --workspace-settings-max-height: auto;
    }

    .io-panel.add-application {
        --workspace-popup-app-max-height: fit-content;
        height: 320px;
        width: 280px;
    }

    .add-workspace {
        width: 100%;
        height: 240px;
        max-height: fit-content;
    }

    .save-workspace-dialog.io-dialog {
        --workspace-dialog-min-width: 280px;
    }
}

.io-connect-workspaces-frame-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--workspace-dialog-backdrop-background);
    z-index: 9999;
    pointer-events: none;
}
