Template:SCitem/styles.css

.template-component {
	display: flex;
}

.template-component__connectors {
	/* --connector-thickness: 2px; */
	position: relative;
}

.template-component__connectorX,
.template-component__connectorY {
	position: absolute;
	background-color: var( --border-color-base );
	left: calc( 50% - 2px ); /* calc( 50% - var( --connector-thickness ) ) */
}

.template-component__connectorX {
	top: calc( 50% - 2px ); /* calc( 50% - var( --connector-thickness ) ) */
	right: 0;
	height: 2px; /* var( --connector-thickness ) */
}

.template-component__connectorY {
	top: 0;
	bottom: 0;
	width: 2px; /* var( --connector-thickness ) */
}

.template-component--level-1 .template-component__connectors {
	display: none;
}

.template-component--level-2 .template-component__connectors {
	width: 3rem;
}

.template-component--level-3 .template-component__connectors {
	width: 6rem;
}

.template-component__card {
	position: relative;
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius-medium );
	display: grid;
	grid-template-columns: 3rem auto;
	/* This isn't pretty */
	line-height: 1.35;
	flex-grow: 1;
}

.template-component__port {
	display: grid;
	place-content: center;
	border-right: 1px solid var( --border-color-base );
	border-top-left-radius: var( --border-radius-medium );
	border-bottom-left-radius: var( --border-radius-medium );
	background-color: var( --color-surface-0 );
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
}

.template-component__count {
	color: var( --color-subtle );
	font-size: 0.8125rem;
}

.template-component__item {
	border-top-right-radius: var( --border-radius-medium );
    border-bottom-right-radius: var( --border-radius-medium );
	padding: var( --space-sm ) var( --space-md );
	background-color: var( --color-surface-2 );
}

.template-component__title {
	color: var( --color-emphasized );
	font-weight: 500;
	font-size: 0.875rem;
}

.template-component__subtitle {
	color: var( --color-subtle );
	font-size: 0.8125rem;
}