User:Alistair3149/sandbox/componenttest/template/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.4; flex-grow: 1; }

.template-component__hardpoint { 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 ); font-weight: 500; }

.template-component__count { position: absolute; top: -0.75rem; right: -0.75rem; padding: 0.125rem 0.5rem; outline: 4px solid var(--color-surface-0); color: #fff; background-color: var( --color-primary ); border-radius: 1000px; font-size: 0.8125rem; }

.template-component__item { padding: var( --space-sm ) var( --space-md ); background-color: var( --color-surface-2 ); }

.template-component__title { font-weight: 500; font-size: 0.875rem; }

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