/* JkLayoutManager 布局管理器  */

.jkTopLeftBar {
    position: absolute;
    left: 40px;
    top: 0;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 200px;
    height: 36px;
    padding: 0 4px;
    box-sizing: border-box;
    gap: 0 4px;

    label {
        font-size: small;
        color: var(--scrollbar-hover-color);
    }

    div {
        color: var(--scrollbar-hover-color);
    }

    span {
        font-size: small;
        color: light-dark(var(--text-color), var(--dark-text-color));
    }
}



.jkTopRightBar {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0 6px;
    width: 200px;

    .jkTopRightBarItem {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;

        .jkIcon {
            width: 100%;
            height: 100%;
            padding: 6px;
            box-sizing: border-box;
            color: light-dark(var(--text-color), var(--dark-text-color));
        }
    }

    .jkTopRightBarItem:hover {
        background-color: light-dark(var(--highlight-color), var(--dark-border-color));
    }
}

.jkLeftMenuPanel {
    border-right: 1px solid var(--border-color);
}

.jkRightMenuPanel {
    border-left: 1px solid var(--border-color);
}

.jkLeftMenuPanel,
.jkRightMenuPanel {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 0;
    padding: 4px 2px;
    box-sizing: border-box;
    height: 100%;

    .jkMenuItem,
    .jkMenuTrigger {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;

        .jkIcon {
            width: 100%;
            height: 100%;
            padding: 6px;
            box-sizing: border-box;
            color: light-dark(var(--text-color), var(--dark-text-color));
        }
    }

    .jkMenuItem:hover,
    .jkMenuTrigger:hover {
        background-color: light-dark(var(--highlight-color), var(--dark-border-color));
    }

    .jkMenuItem.jkSelectedItem {
        background-color: light-dark(var(--border-color), var(--dark-border-color));
    }

    .jkMenuTrigger {
        opacity: 0.5;
    }

    .jkMenuTrigger.jkActiveItem {
        opacity: 1;
    }
}