.sb-treePicker-body {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    
    .sb-treePicker-selectionSection {
        width: $sb-treePicker-selectionTab-width;
        padding: $sb-treePicker-selectionTab-padding;
        border-width: $sb-treePicker-tabs-divider-border-desktop;
        border-color: $sb-treePicker-tabs-divider-border-color;
        border-style: solid;
        
        .sb-search-box {
            max-width: $sb-treePicker-searchbox-max-width;
            width: $sb-treePicker-searchbox-width;
            margin: $sb-treePicker-searchbox-tree-space;

            // .sb-search-input {
            //     border: $sb-treePicker-searchbox-border;
            // }

            .sb-search-icon {
                color: $sb-treePicker-searchbox-iconColor-search;
            }
        }
    }

    .sb-treePicker-selectedSection {
        width: $sb-treePicker-selectedTab-width;
        padding: $sb-treePicker-selectedTab-padding;
        .list {
            .node {
                display: none;
                &.picked {
                    display: block;
                }
            }
            .empty {
                display: none;
            }
        }
        .sb-treePicker-selected-count {
            color: $sb-treePicker-selected-color;
        }
    }

    .tree,
    .list {
        .node {
            margin: $sb-treePicker-nodes-between-spacing;
            min-height: $sb-treePicker-node-min-height;

            .head {
                display: flex;
                align-items: center;
            }

            .icon,
            .name {
                cursor: pointer;
                vertical-align: middle;
            }

            .icon {
                margin: $sb-treePicker-nodes-icon-title-spacing;
            }

            .name {
                color: $sb-treePicker-nodes-name-color;
            }

            .disabled {
                opacity: $sb-treePicker-nodes-disabled-opacity;
                cursor: default;
            }

            .content {
                display: none;
                border-left: $sb-treePicker-nodes-childlist-border;
                border-right: 0;
                margin: $sb-treePicker-nodes-childlist-margin;
                padding: $sb-treePicker-nodes-childlist-padding;
            }

            .sb-treePicker-searchedQuery {
                background: $sb-treePicker-search-query-highlight-color;
            }

            .add.icon:before,
            .minus.icon:before,
            .checkmark:before {
                font-size: $sb-treePicker-nodes-icons-font-size;
                line-height: $sb-treePicker-nodes-icons-line-height;
                border-radius: $sb-treePicker-nodes-icons-border-radius;
                border: $sb-treePicker-nodes-icons-border;
                height: $sb-treePicker-nodes-icons-height;
                width: $sb-treePicker-nodes-icons-width;
                padding: $sb-treePicker-nodes-icons-padding;
                color: $sb-treePicker-nodes-icons-color;
                display: inline-block;
                vertical-align: middle;
            }

            .checkmark:before {
                color: $white-color;
                background: $sb-treePicker-selected-color !important;
                border-color: $sb-treePicker-selected-color;
            }

            .square {
                color: $sb-treePicker-nodes-icons-color;
                font-size: $sb-treePicker-not-selected-node-icons-size;
            }

            .square,
            .minus,
            .checkmark {
                display: none;
            }

            &.opened>.head {

                .name {
                    color: $sb-treePicker-opened-node-name-color;
                }

                .add {
                    display: none;
                }

                .minus {
                    display: inline-block;
                }
            }

            &.childless {
                .head {
                    .square {
                        display: inline-block;
                    }
                    .add {
                        display: none;
                    }
                }
                .content{
                    .add,
                    .minus {
                        display: none;
                    }
                }
            }

            &.picked {
                .checkmark {
                    display: inline-block;
                    margin: $sb-treePicker-checked-nodes-icon-title-spacing;
                }
                .head .square {
                    display: none;
                }
            }
        }
    }
    .tree {
        .picked {
            .name {
                color: $sb-treePicker-selected-color;
            }
        }
    }
}

@include respond-below(sm) {
    .sb-treePicker {
        .sb-treePicker-selectionSection {
            width: 100%;
            border-width: $sb-treePicker-tabs-divider-border-mobile;
        }
        .sb-treePicker-selectedSection {
            width: 100%;
        }
    }
}

[dir="rtl"] .sb-treePicker-body {
    .sb-treePicker-selectionSection {
        border-width: $sb-treePicker-tabs-divider-border-desktop-rtl;
    }
    .tree,
    .list {
        .node {
            .icon {
                margin: $sb-treePicker-nodes-icon-title-spacing-rtl;
            }
            .content {
                border-left: 0;
                border-right: $sb-treePicker-nodes-childlist-border;
            }
        }
    }
}