.collection-nodes--wrap {
    --padding-left: 1.5em;
    --padding-right: 3em;
    --padding-top: 2.25em;
    --padding-bottom: 0.25em;
    --child-height: calc(var(--node-height) - var(--padding-top) - var(--padding-bottom));
    --child-width: calc(var(--node-width) - var(--padding-left) - var(--padding-right));

    min-width: var(--node-width);
    min-height: var(--node-height);
    max-width: var(--node-width);
    max-height: var(--node-height);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* outline: 1px dotted white; */
}

.collection-nodes {
    position: relative;

    border-color: var(--node-color);
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;

    max-width: max-content;
    max-height: max-content;
    padding-right: var(--padding-right);
}

.collection-nodes--inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 0 1em;
    max-width: var(--child-width);
    max-height: var(--child-height);
    min-height: calc(var(--child-height) / 4);
    min-width: var(--child-width);

    padding-left: var(--padding-left);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);

    overflow: auto;
}


.collection-nodes--total {
    position: absolute;
    bottom: 0.25em;
    right: 0.25em;
    font-size: 0.5em;
}

.collection-nodes .add {
    position: absolute;
    bottom: calc(50% - var(--padding-bottom));
    right: 0.25em;
}

.collection-nodes--title {
    position: absolute;
    top: 0.5em;
    left: calc(var(--child-width)/2);
}