模板:NodeList/styles.css

.template-components__section {
    position: relative;
    padding-top: var( --space-md );
    padding-bottom: var( --space-md );
    display: flex;
    flex-direction: column;
    gap: var( --space-sm );
}

/* TemplateStyles style tag can get in-between */
.template-components__section + .template-components__section,
.template-components__section + style + .template-components__section {
    border-top: 1px solid var( --border-color-base );
}

.template-components__label {
    align-self: flex-start;
    display: flex;
    align-items: center;
    color: var( --color-base--subtle );
    font-size: 0.875rem;
    letter-spacing: 0.75px;
    gap: var(--space-sm );
    line-height: 1.25;
}

.template-components__label > img {
    height: 2rem;
    width: auto;
    position: absolute;
    top: 1rem;
    right: 0;
    opacity: .2;
}

.template-components__group {
    display: flex;
    gap: var( --space-sm );
    flex-wrap: wrap;
    flex-grow: 1;
}

.template-components__subgroup {
    display: flex;
    flex-direction: column;
    gap: var( --space-sm );
    flex-grow: 1;
}

.template-components__subgroup .template-component__connectorY {
    top: -0.5rem; /* calc( var( --space-sm ) * -1 ) */
}

.template-components__subgroup .template-component:last-of-type .template-component__connectorY {
    bottom: calc( 50% + 2px); /* calc( var( --connector-thickness ) + 2px ) */
}