.resizable-bar {
    --bar-size: 20px;
    --icon-size: 25px;
    position: absolute;
    z-index: 10;
    background-color: var(--color1);
    border-left: 1px solid var(--color8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.resizable-bar.vertical {
    cursor: ew-resize;
    width: var(--bar-size);
    height: 100%;
    left: 0;
}

.resizable-bar.vertical.reversed {
    left: unset;
    right: 0;
}

.resizable-bar.horizontal {
    cursor: ns-resize;
    width: 100%;
    height: var(--bar-size);
    top: 0;
}

.resizable-bar.horizontal.reversed {
    top: unset;
    bottom: 0;
}

.resizable-container1, .resizable-container2 {
    position: relative !important;
}

.resizable-container1.resizable-maximized {
    width: 100% !important;
}

.resizable-container2.resizable-minimized {
    display: none;
}

.resizable-bar-icon {
    color: var(--color8);
    font-size: var(--icon-size);
    cursor: inherit;
}

.resizable-container1.resizable-maximized .resizable-bar-icon {
    display: none;
}

.resizable-toggle-icon {
    position: absolute;
    z-index: 10000;
    color: var(--color8);
    font-size: var(--icon-size);
    cursor: pointer;
}

.resizable-toggle-icon.vertical {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.resizable-toggle-icon.horizontal {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.resizable-container1.resizable-maximized .resizable-bar.vertical .resizable-toggle-icon {
    transform: rotate(180deg) translateX(50%);
}

.resizable-container1.resizable-maximized .resizable-bar.horizontal .resizable-toggle-icon {
    transform: rotate(180deg) translateY(50%);
}