#canvas {
    flex: 1;

    .box {
        cursor: pointer;
        cursor: hand;
    }

    .connector {
        cursor: pointer;
        cursor: hand;

        &.stateOn {
            fill: $onColor;
        }
        &.stateOff {
            fill: $offColor;
        }
        &.stateUnknown {
            fill: $unknownColor;
        }
        &.stateOscillating {
            fill: $oscillatingColor;
        }

        &:hover {
            fill: $hoverColor;
        }
    }

    .wire {
        cursor: hand;
        cursor: pointer;

        &.stateOn .main {
            stroke: $onColor;
        }
        &.stateOff .main {
            stroke: $offColor;
        }
        &.stateUnknown .main {
            stroke: $unknownColor;
        }
        &.stateOscillating .main {
            stroke: $oscillatingColor;
        }

        &:hover {
            .main {
                stroke: black;
            }

            .hitbox {
                stroke: $hoverColor;
                opacity: 0.5;
            }
        }
    }

    .multilinetext {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        p {
            margin: 0;
            padding: 0;
            text-align: center;
        }
    }
}
