.components-bar {
    width: 40rem;
    height: 100%;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 101000;
    box-sizing: border-box;
    visibility: hidden;
}

.components-bar.is-shown {
    visibility: visible;
}

.toolbar.is-shown + .properties-bar + .actions-bar + .parameters-bar + .components-bar.is-shown {
    left: 3rem;
}

.toolbar.is-shown + .properties-bar.is-shown + .actions-bar + .parameters-bar + .components-bar.is-shown {
    left: 23rem;
}

.components-bar > .tree {
    overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100% - 4rem);
    min-height: calc(100% - 4rem);
    box-sizing: border-box;
    padding: 1rem;
}

.components-bar > .buttons > .pick > .id {
    display: inline-block;
    margin-left: 0.5rem;
}

.components-bar > .buttons > .pick > .id::before {
    content: '(ID:';
    margin-right: 0.5rem;
    display: inline-block;
}

.components-bar > .buttons > .pick > .id::after {
    content: ')';
    display: inline-block;
}