Modul:ItemPorts/styles.css

.template-itemPorts {
    display: grid;
    gap: var( --space-xs );
    margin-top: var( --space-md );
    margin-bottom: var( --space-md );
}

.template-itemPort {
    display: grid;
    grid-template-areas: 'port item';
    grid-template-columns: max-content 1fr;
    border: 1px solid var( --border-color-base );
    border-radius: var( --border-radius--medium );
    line-height: var( --line-height-sm );
}

.template-itemPort-port {
    grid-area: port;
    display: grid;
    place-content: center;
    padding: var( --space-sm ) var( --space-md );
    border-right: 1px solid var( --border-color-base );
    border-top-left-radius: var( --border-radius--medium );
    border-bottom-left-radius: var( --border-radius--medium );
}

.template-itemPort-item {
    grid-area: item;
    padding: var( --space-sm ) var( --space-md );
    border-top-right-radius: var( --border-radius--medium );
    border-bottom-right-radius: var( --border-radius--medium );
}

.template-itemPort-item--hasItem {
    background-color: var( --color-surface-2 );
}

.template-itemPort-size {
    font-size: var( --font-size-small );
    font-weight: var( --font-weight-medium );
}

.template-itemPort-subtitle {
    color: var( --color-base--subtle );
    font-size: var( --font-size-x-small );
}

.template-itemPort-title {
    font-size: var( --font-size-medium );
    font-weight: var( --font-weight-medium );
}

.template-itemPort-item--hasItem .template-itemPort-title {
    color: var( --color-base--emphasized );
}