@charset "UTF-8";

:root {
    --wire-color-lightness: 50%;
    --wire-color-chroma: 0.25;
    --wire-high-factor: 1.25;
    --wire-low-factor: 0.55;
    --wire-null-factor: 0.4;
    --wire-null-alpha: 0.75;
    --wire-high-alpha: 0.75;

    --wire-color: oklch(var(--wire-color-lightness) 0 0); /* disconnected wire */
    --wire-color0: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 145);
    --wire-color1: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 115);
    --wire-color2: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 90);
    --wire-color3: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 50);
    --wire-color4: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 350);
    --wire-color5: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 320);
    --wire-color6: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 290);
    --wire-color7: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 260);
    --wire-color8: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 205);
    --wire-color9: oklch(var(--wire-color-lightness) var(--wire-color-chroma) 180);

    --wire-color0-high: oklch(from var(--wire-color0) calc(l * var(--wire-high-factor)) c h);
    --wire-color1-high: oklch(from var(--wire-color1) calc(l * var(--wire-high-factor)) c h);
    --wire-color2-high: oklch(from var(--wire-color2) calc(l * var(--wire-high-factor)) c h);
    --wire-color3-high: oklch(from var(--wire-color3) calc(l * var(--wire-high-factor)) c h);
    --wire-color4-high: oklch(from var(--wire-color4) calc(l * var(--wire-high-factor)) c h);
    --wire-color5-high: oklch(from var(--wire-color5) calc(l * var(--wire-high-factor)) c h);
    --wire-color6-high: oklch(from var(--wire-color6) calc(l * var(--wire-high-factor)) c h);
    --wire-color7-high: oklch(from var(--wire-color7) calc(l * var(--wire-high-factor)) c h);
    --wire-color8-high: oklch(from var(--wire-color8) calc(l * var(--wire-high-factor)) c h);
    --wire-color9-high: oklch(from var(--wire-color9) calc(l * var(--wire-high-factor)) c h);

    --wire-color0-high-alpha: oklch(from var(--wire-color0) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color1-high-alpha: oklch(from var(--wire-color1) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color2-high-alpha: oklch(from var(--wire-color2) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color3-high-alpha: oklch(from var(--wire-color3) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color4-high-alpha: oklch(from var(--wire-color4) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color5-high-alpha: oklch(from var(--wire-color5) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color6-high-alpha: oklch(from var(--wire-color6) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color7-high-alpha: oklch(from var(--wire-color7) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color8-high-alpha: oklch(from var(--wire-color8) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));
    --wire-color9-high-alpha: oklch(from var(--wire-color9) calc(l * var(--wire-high-factor)) c h / var(--wire-high-alpha));

    --wire-color0-low: oklch(from var(--wire-color0) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color1-low: oklch(from var(--wire-color1) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color2-low: oklch(from var(--wire-color2) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color3-low: oklch(from var(--wire-color3) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color4-low: oklch(from var(--wire-color4) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color5-low: oklch(from var(--wire-color5) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color6-low: oklch(from var(--wire-color6) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color7-low: oklch(from var(--wire-color7) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color8-low: oklch(from var(--wire-color8) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);
    --wire-color9-low: oklch(from var(--wire-color9) calc(l * var(--wire-low-factor)) calc(c * var(--wire-low-factor)) h);

    --wire-color0-null: oklch(from var(--wire-color0) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color1-null: oklch(from var(--wire-color1) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color2-null: oklch(from var(--wire-color2) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color3-null: oklch(from var(--wire-color3) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color4-null: oklch(from var(--wire-color4) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color5-null: oklch(from var(--wire-color5) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color6-null: oklch(from var(--wire-color6) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color7-null: oklch(from var(--wire-color7) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color8-null: oklch(from var(--wire-color8) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));
    --wire-color9-null: oklch(from var(--wire-color9) calc(l * var(--wire-low-factor)) calc(c * var(--wire-null-factor)) h / var(--wire-null-alpha));

    --grid-bg-color: #111;
    --header-bg-color: #1a1a1a;
    --header-border-color: #222;
    --component-rotate-duration: 0.15s;
    --component-color-transition-duration: 0.15s;
    --component-delete-duration: 0.25s;
    --component-body-color: #444;
    --component-border-color: #222;
    --component-body-hover-color: #555;
    --component-border-hover-color: #333;
    --component-preview-color: #444;
    --component-port-body-color: #444;
    --component-port-border-color: #6d6d6d;
    --button-hover-factor: 1.2;
    --button-bg-color: #999;
    --button-border-color: #666;
    --button-bg-hover-color: oklch(from var(--button-bg-color) calc(l * var(--button-hover-factor)) c h);
    --button-border-hover-color: oklch(from var(--button-border-color) calc(l * var(--button-hover-factor)) c h);
    --disabled-text-color: #777;
}

/*
 * Flex layout
 */
html, body {
    height: 100%;
    margin: 0;
}
#flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#header {
    flex: 0 1 auto;
    padding: 5px;
    background-color: var(--header-bg-color);
    border-bottom: 1px solid var(--header-border-color);
}
#content {
    flex: 1 1 auto;
}

/*
 * General UI/layout
 */
html {
    background-color: black;
    color: white;
    font-family: Roboto, sans-serif;
    user-select: none;
}
#header h1 {
    display: inline-block;
    font-variant: small-caps;
    text-decoration: underline;
    text-decoration-color: white;
    margin-top: 0;
    margin-bottom: 5px;
    margin-left: 10px;
    transform: skew(-15deg, 0deg);
    transition: text-shadow 1s, transform 1s, color 1s, text-decoration-color 1s;
    text-shadow:
        2px 2px 4px rgba(255, 0, 0, 0.822),
        -4px -4px 8px rgba(0, 174, 255, 0.747),
        4px 4px 8px rgba(247, 0, 255, 0.801);
}
#header h1[data-c="1"] {
    text-shadow:
        rgba(0, 255, 13, 0.76) -2px -2px 10px,
        rgba(255, 72, 0, 0.712) 2px 2px 10px;
}
#header h1[data-c="2"] {
    text-shadow:
        -1px -1px 0 hsla(0, 0%, 75%, 0.7),
        -2px -2px 0 hsla(0, 0%, 70%, 0.6),
        -3px -3px 0 hsla(0, 0%, 65%, 0.5),
        -4px -4px 0 hsla(0, 0%, 60%, 0.4),
        -5px -5px 0 hsla(0, 0%, 55%, 0.3),
        -5px -5px 20px rgba(127,127,255,1.0),
        0px 0px 15px rgba(127,127,255,0.6),
        -5px -5px 3px rgba(127,127,255,0.9);
}
#header h1[data-c="3"] {
    color: rgba(255, 255, 255, 0.75);
    transform: skew(15deg, 0deg);
    text-shadow:
        0 -2px 4px #FFF,
        0 -4px 10px rgb(118, 250, 243),
        0 0px 20px #2ac3ff,
        0 8px 40px rgb(0, 89, 255);
}
#header h1[data-c="4"] {
    color: rgba(127, 127, 184, 0.75);
    text-shadow:
        1px 1px 3px #ddf,
        -5px -5px 10px #00f;
    transform: none;
    text-decoration-color: rgba(0, 0, 255, 0.63);
}
#header h1[data-c="5"] {
    color: rgba(255, 255, 255, 0.75);
    text-shadow:
        0 -1px 4px #FFF,
        0 -2px 10px #ff0,
        0 -10px 20px #ff8000,
        0 -18px 40px #F00;
}
#toolbar {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}
#toolbar > .toolbar > .toolbar-menu-button .save-disabled {
    color: var(--disabled-text-color);
}

/*
 * Toolbar UI element
 */
.toolbar > .toolbar-button {
    display: inline-block;
    cursor: default;
    background-color: var(--component-body-color);
    border: 2px solid var(--component-border-color);
    transition: border-color var(--component-color-transition-duration);
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    margin: 5px;
    text-shadow: 1px 1px 2px black;
    min-width: 50px;
    line-height: 2;
    padding: 0 5px;
}
.toolbar > .toolbar-button:hover {
    background-color: var(--component-body-hover-color);
    border-color: var(--component-border-hover-color);
}
/* Action button */
.toolbar > .toolbar-action-button {
    text-shadow: 1px 1px 2px #555;
    border: 2px solid var(--button-border-color);
    background-color: var(--button-bg-color);
    color: #000;
}
.toolbar > .toolbar-action-button:hover {
    border-color: var(--button-border-hover-color);
    background-color: var(--button-bg-hover-color);
}
/* Toggle button */
.toolbar > .toolbar-toggle-button {
    border: 2px solid var(--button-border-color);
    text-shadow: 1px 1px 2px #555;
    background-color: var(--button-bg-color);
    color: #000;
}
.toolbar > .toolbar-toggle-button:hover {
    border-color: var(--button-border-hover-color);
    background-color: var(--button-bg-hover-color);
}
.toolbar > .toolbar-toggle-button-on {
    text-shadow: 1px 1px 2px #222;
}
.toolbar > .toolbar-toggle-button-on:before {
    content: '☑ ';
}
.toolbar > .toolbar-toggle-button-off {
    background-color: var(--button-bg-color);
}
.toolbar > .toolbar-toggle-button-off:before {
    content: '☐ ';
}
/* Menu button */
.toolbar > .toolbar-menu-button {
    padding: 0 10px;
    text-shadow: 1px 1px 2px #555;
}
.toolbar > .toolbar-toggle-button-on.toolbar-menu-button:before {
    content: '';
}
.toolbar > .toolbar-toggle-button-off.toolbar-menu-button:before {
    content: '';
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container {
    position: absolute;
    z-index: 255;
    margin-top: 1px;
    margin-left: -12px; /* compensate paddings on buttons and inner toolbar */
    border: 2px solid var(--button-border-color);
    background-color: var(--button-bg-color);
    border-radius: 0 0 3px 3px;
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container > .toolbar > .toolbar-button {
    margin: 0;
    border: none;
    border-radius: 0;
}
.toolbar > .toolbar-toggle-button-off > .toolbar-menu-container {
    display: none;
}
.toolbar > .toolbar-toggle-button-on > .toolbar-menu-container {
    display: block;
}
.toolbar > .toolbar-toggle-button-on > .toolbar-menu-container > .toolbar > .toolbar-button {
    display: block;
    text-align: left;
}
.toolbar > .toolbar-menu-button > .toolbar-menu-container > .toolbar > .toolbar-separator {
    margin: 1px 0;
    border: 1px solid var(--button-border-color);
    border-radius: 0;
}
.toolbar > .toolbar-button i::before {
    content: '»';
    font-weight: normal;
}
.toolbar > .toolbar-button i::after {
    content: '«';
    font-weight: normal;
}

/*
 * Focus hint, see main.js.
 */
#focus-hint {
    pointer-events: none;
    display: none;
    position: absolute;
    z-index: 99;
    top: 75px;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    padding: 10px;
    text-align: center;
    font-size: 1.3em;
    border: 3px solid rgba(255, 0, 0, 0.5);
    background: rgba(128, 0, 0, 0.5);
    opacity: 0.0;
    border-radius: 10px;
    transition: opacity 0.5s;
}
body.no-focus #focus-hint, body.focus-changing #focus-hint {
    display: block;
}
body.no-focus #focus-hint:has(+div.grid:hover) {
    opacity: 0.5;
}

/*
 * Grid
 */
.grid {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #888 1px, var(--grid-bg-color) 1px);
}
.grid.grid-zoom-100 {
    background-image: radial-gradient(circle, #444 1px, var(--grid-bg-color) 1px);
}
.grid.grid-zoom-50 {
    background-image: radial-gradient(circle, #444 1px, var(--grid-bg-color) 1px);
}
.grid.grid-zoom-175 {
    background-image: radial-gradient(circle, #aaa 1px, var(--grid-bg-color) 1px);
}
.grid-status {
    z-index: 20;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px;
    background-color: #00000038;
    border: 1px solid #4444448a;
    border-radius: 3px;
    opacity: 1;
    transition: opacity 0.5s;
}
.grid-status.grid-status-faded {
    opacity: 0;
}
.grid-status i {
    color: #bbb;
    font-weight: bold;
}
.grid-status i::before {
    content: '»';
    font-weight: normal;
    vertical-align: text-bottom;
}
.grid-status i::after {
    content: '«';
    font-weight: normal;
    vertical-align: text-bottom;
}

/*
 * Base component
 */
.component {
    z-index: 11;
    position: absolute;
    background-color: transparent;
    cursor: default;
    box-sizing: border-box;
    opacity: 1;
}
.component-drop-preview {
    z-index: 9;
    position: absolute;
    border-radius: 8px;
    outline: 2px solid var(--component-preview-color);
    outline-offset: -4px;
}
.component-rotate-animation {
    transition: transform var(--component-rotate-duration);
    transform: rotate(90deg);
}
.component-rotate-animation span {
    display: block;
    transition: transform var(--component-rotate-duration);
    transform: rotate(-90deg);
}
.component-delete-animation {
    transition: opacity var(--component-delete-duration);
    opacity: 0;
}
.component-inner {
    z-index: 12;
    position: absolute;
    background-color: var(--component-body-color);
    border: 1px solid var(--component-border-color);
    transition: border-color var(--component-rotate-duration);
    border-radius: 3px;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    margin: 5px; /* fixme: needs to match component, should just be set there */
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    overflow: hidden;
    text-shadow: 1px 1px 2px black;
    font-size: 0.8em;
}
.grid-zoom-below-65 .component-inner span {
    display: none;
}
.component-inner:hover {
    background-color: var(--component-body-hover-color);
    border-color: var(--component-border-hover-color);
}
.component-port {
    z-index: 14;
    position: absolute;
    background-color: var(--component-port-border-color);
    border-radius: 3px;
    font-size: 0.8em;
    text-align: center;
    color: #ddd;
    border: 1px solid var(--component-port-body-color);
    box-sizing: border-box;
    transition: background-color var(--component-color-transition-duration);
}
.grid-zoom-below-100 .component-port {
    border-radius: 0;
}
.grid-zoom-below-85 .component-port span {
    display: none;
}
.component-port:hover {
    background-color: #aaa;
    transition: background-color var(--component-color-transition-duration), color var(--component-color-transition-duration);
    color: #000;
}
.component-port-label {
    pointer-events: none;
    z-index: 13;
    position: absolute;
    white-space: nowrap;
    background-color: #00000038;
    border: 1px solid #4444448a;
    border-radius: 3px;
    box-sizing: border-box;
    color: #ccc;
    opacity: 0;
    transition: opacity var(--component-color-transition-duration);
}
.grid-zoom-below-125 .component-port-label {
    display: none;
}
.component:hover .component-port-label {
    opacity: 1;
}

/*
 * Port (the port-component, not a port on a component)
 */
div.component.port[data-net-state] > div.component-inner {
    outline: 4px solid transparent;
    outline-offset: -4px;
}
div.component.port[data-net-state="0"] > div.component-inner {
    outline-color: var(--wire-color-low);
}
div.component.port[data-net-state="1"] > div.component-inner {
    outline-color: var(--wire-color-high);
}
/*div.component[data-net-state=""] > div.component-inner {
    outline-color: var(--wire-color-null);
}*/
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="0"]) {
    outline-color: var(--wire-color0-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="0"])  {
    outline-color: var(--wire-color0-high);
    box-shadow: 1px 1px 3px var(--wire-color0-high-alpha), -1px -1px 3px var(--wire-color0-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="1"]) {
    outline-color: var(--wire-color1-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="1"])  {
    outline-color: var(--wire-color1-high);
    box-shadow: 1px 1px 3px var(--wire-color1-high-alpha), -1px -1px 3px var(--wire-color1-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="2"]) {
    outline-color: var(--wire-color2-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="2"])  {
    outline-color: var(--wire-color2-high);
    box-shadow: 1px 1px 3px var(--wire-color2-high-alpha), -1px -1px 3px var(--wire-color2-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="3"]) {
    outline-color: var(--wire-color3-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="3"])  {
    outline-color: var(--wire-color3-high);
    box-shadow: 1px 1px 3px var(--wire-color3-high-alpha), -1px -1px 3px var(--wire-color3-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="4"]) {
    outline-color: var(--wire-color4-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="4"])  {
    outline-color: var(--wire-color4-high);
    box-shadow: 1px 1px 3px var(--wire-color4-high-alpha), -1px -1px 3px var(--wire-color4-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="5"]) {
    outline-color: var(--wire-color5-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="5"])  {
    outline-color: var(--wire-color5-high);
    box-shadow: 1px 1px 3px var(--wire-color5-high-alpha), -1px -1px 3px var(--wire-color5-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="6"]) {
    outline-color: var(--wire-color6-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="6"])  {
    outline-color: var(--wire-color6-high);
    box-shadow: 1px 1px 3px var(--wire-color6-high-alpha), -1px -1px 3px var(--wire-color6-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="7"]) {
    outline-color: var(--wire-color7-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="7"])  {
    outline-color: var(--wire-color7-high);
    box-shadow: 1px 1px 3px var(--wire-color7-high-alpha), -1px -1px 3px var(--wire-color7-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="8"]) {
    outline-color: var(--wire-color8-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="8"])  {
    outline-color: var(--wire-color8-high);
    box-shadow: 1px 1px 3px var(--wire-color8-high-alpha), -1px -1px 3px var(--wire-color8-high-alpha);
}
div.component.port[data-net-state="0"] > div.component-inner:has(+div[data-net-color="9"]) {
    outline-color: var(--wire-color9-low);
}
div.component.port[data-net-state="1"] > div.component-inner:has(+div[data-net-color="9"])  {
    outline-color: var(--wire-color9-high);
    box-shadow: 1px 1px 3px var(--wire-color9-high-alpha), -1px -1px 3px var(--wire-color9-high-alpha);
}
/* meh, ugly, lot's of css, overall garbage */
div.component.port[data-port-state="0"][data-component-rotation="0"] {
    box-shadow: inset 0px -4px rgb(92, 92, 92);
}
div.component.port[data-port-state="0"][data-component-rotation="1"] {
    box-shadow: inset 4px 0px rgb(92, 92, 92);;
}
div.component.port[data-port-state="0"][data-component-rotation="2"] {
    box-shadow: inset 0px 4px rgb(92, 92, 92);;
}
div.component.port[data-port-state="0"][data-component-rotation="3"] {
    box-shadow: inset -4px 0px rgb(92, 92, 92);;
}
div.component.port[data-port-state="1"][data-component-rotation="0"] {
    box-shadow: inset 0px -4px rgb(255, 246, 124);
}
div.component.port[data-port-state="1"][data-component-rotation="1"] {
    box-shadow: inset 4px 0px rgb(255, 246, 124);
}
div.component.port[data-port-state="1"][data-component-rotation="2"] {
    box-shadow: inset 0px 4px rgb(255, 246, 124);
}
div.component.port[data-port-state="1"][data-component-rotation="3"] {
    box-shadow: inset -4px 0px rgb(255, 246, 124);
}

/*
 * Gates
 */
div.component.gate[data-component-rotation="0"] > div.component-inner {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
div.component.gate[data-component-rotation="1"] > div.component-inner {
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
div.component.gate[data-component-rotation="2"] > div.component-inner {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
}
div.component.gate[data-component-rotation="3"] > div.component-inner {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

/*
 * Wire
 */
.wire-h, .wire-v {
    z-index: 10;
    position: absolute;
    box-sizing: border-box;
    background-color: #6d6d6d;
}
.wire-h:hover, .wire-v:hover {
    outline: 2px solid #fffa;
}
/* extends clickable area around wires */
.wire-h::after, .wire-v::after {
    content: '';
    position: absolute;
    inset-block: -4px;
    inset-inline: -4px;
}
.grid-zoom-above-100 .wire-h::after, .grid-zoom-above-100 .wire-v::after {
    inset-block: -8px;
    inset-inline: -8px;
}
.wire-delete-animation {
    transition: opacity var(--component-delete-duration);
    opacity: 0;
}
/* wirebuilder debugging */
.wirebuilder-debug {
    pointer-events: none;
    z-index: 11;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid grey;
    border-top-color: red;
    border-bottom-color: green;
    border-left-color: orange;
    border-right-color: turquoise;
    opacity: 0.5;
}
.wirebuilder-debug span {
    pointer-events: none;
    z-index: 11;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 40px;
    margin-left: -150px;
    margin-top: -20px;
    text-align: center;
}
.wirebuilder-debug-point {
    pointer-events: none;
    z-index: 11;
    display: block;
    position: absolute;
}
.wirebuilder-debug-point0::after {
    content: '0';
}
.wirebuilder-debug-point1::after {
    content: '1';
}
.wirebuilder-debug-point2::after {
    content: '2';
}

/*
 * Net colors
 */
/* wire colors when not simulating */
div[data-net-color="0"][data-net-state=""] { background-color: var(--wire-color0); }
div[data-net-color="1"][data-net-state=""] { background-color: var(--wire-color1); }
div[data-net-color="2"][data-net-state=""] { background-color: var(--wire-color2); }
div[data-net-color="3"][data-net-state=""] { background-color: var(--wire-color3); }
div[data-net-color="4"][data-net-state=""] { background-color: var(--wire-color4); }
div[data-net-color="5"][data-net-state=""] { background-color: var(--wire-color5); }
div[data-net-color="6"][data-net-state=""] { background-color: var(--wire-color6); }
div[data-net-color="7"][data-net-state=""] { background-color: var(--wire-color7); }
div[data-net-color="8"][data-net-state=""] { background-color: var(--wire-color8); }
div[data-net-color="9"][data-net-state=""] { background-color: var(--wire-color9); }
/* wire colors null */
div[data-net-color="0"][data-net-state="null"] { background-color: var(--wire-color0-null); }
div[data-net-color="1"][data-net-state="null"] { background-color: var(--wire-color1-null); }
div[data-net-color="2"][data-net-state="null"] { background-color: var(--wire-color2-null); }
div[data-net-color="3"][data-net-state="null"] { background-color: var(--wire-color3-null); }
div[data-net-color="4"][data-net-state="null"] { background-color: var(--wire-color4-null); }
div[data-net-color="5"][data-net-state="null"] { background-color: var(--wire-color5-null); }
div[data-net-color="6"][data-net-state="null"] { background-color: var(--wire-color6-null); }
div[data-net-color="7"][data-net-state="null"] { background-color: var(--wire-color7-null); }
div[data-net-color="8"][data-net-state="null"] { background-color: var(--wire-color8-null); }
div[data-net-color="9"][data-net-state="null"] { background-color: var(--wire-color9-null); }
/* wire colors low */
div[data-net-color="0"][data-net-state="0"] { background-color: var(--wire-color0-low); }
div[data-net-color="1"][data-net-state="0"] { background-color: var(--wire-color1-low); }
div[data-net-color="2"][data-net-state="0"] { background-color: var(--wire-color2-low); }
div[data-net-color="3"][data-net-state="0"] { background-color: var(--wire-color3-low); }
div[data-net-color="4"][data-net-state="0"] { background-color: var(--wire-color4-low); }
div[data-net-color="5"][data-net-state="0"] { background-color: var(--wire-color5-low); }
div[data-net-color="6"][data-net-state="0"] { background-color: var(--wire-color6-low); }
div[data-net-color="7"][data-net-state="0"] { background-color: var(--wire-color7-low); }
div[data-net-color="8"][data-net-state="0"] { background-color: var(--wire-color8-low); }
div[data-net-color="9"][data-net-state="0"] { background-color: var(--wire-color9-low); }
/* wire colors high */
div[data-net-color="0"][data-net-state="1"] { background-color: var(--wire-color0-high); box-shadow: 1px 1px 3px var(--wire-color0-high-alpha), -1px -1px 3px var(--wire-color0-high-alpha); }
div[data-net-color="1"][data-net-state="1"] { background-color: var(--wire-color1-high); box-shadow: 1px 1px 3px var(--wire-color1-high-alpha), -1px -1px 3px var(--wire-color1-high-alpha); }
div[data-net-color="2"][data-net-state="1"] { background-color: var(--wire-color2-high); box-shadow: 1px 1px 3px var(--wire-color2-high-alpha), -1px -1px 3px var(--wire-color2-high-alpha); }
div[data-net-color="3"][data-net-state="1"] { background-color: var(--wire-color3-high); box-shadow: 1px 1px 3px var(--wire-color3-high-alpha), -1px -1px 3px var(--wire-color3-high-alpha); }
div[data-net-color="4"][data-net-state="1"] { background-color: var(--wire-color4-high); box-shadow: 1px 1px 3px var(--wire-color4-high-alpha), -1px -1px 3px var(--wire-color4-high-alpha); }
div[data-net-color="5"][data-net-state="1"] { background-color: var(--wire-color5-high); box-shadow: 1px 1px 3px var(--wire-color5-high-alpha), -1px -1px 3px var(--wire-color5-high-alpha); }
div[data-net-color="6"][data-net-state="1"] { background-color: var(--wire-color6-high); box-shadow: 1px 1px 3px var(--wire-color6-high-alpha), -1px -1px 3px var(--wire-color6-high-alpha); }
div[data-net-color="7"][data-net-state="1"] { background-color: var(--wire-color7-high); box-shadow: 1px 1px 3px var(--wire-color7-high-alpha), -1px -1px 3px var(--wire-color7-high-alpha); }
div[data-net-color="8"][data-net-state="1"] { background-color: var(--wire-color8-high); box-shadow: 1px 1px 3px var(--wire-color8-high-alpha), -1px -1px 3px var(--wire-color8-high-alpha); }
div[data-net-color="9"][data-net-state="1"] { background-color: var(--wire-color9-high); box-shadow: 1px 1px 3px var(--wire-color9-high-alpha), -1px -1px 3px var(--wire-color9-high-alpha); }