:root {
    --FLOW_BG_COLOR: white;
    --FLOW_EDGE_COLOR: black;
    --FLOW_EDGE_LABEL_COLOR: black;
    --FLOW_STATE_FG_COLOR: white;
    --FLOW_STATE_BG_COLOR: teal;
    --FLOW_STATE_BORDER_COLOR: teal;
    --FLOW_STATE_ACTIVE_BORDER_COLOR: orange;
}

@media(prefers-color-scheme: dark) {
    :root {
	--FLOW_BG_COLOR: black;
	--FLOW_EDGE_COLOR: orange;
	--FLOW_EDGE_LABEL_COLOR: orange;
	--FLOW_STATE_FG_COLOR: black;
	--FLOW_STATE_BG_COLOR: salmon;
	--FLOW_STATE_BORDER_COLOR: salmon;
	--FLOW_STATE_ACTIVE_BORDER_COLOR: cyan;
    }
}

.flow_background {
    fill: var(--FLOW_BG_COLOR);
}

.flow_edge_path {
    fill: none;
    stroke-width: 1;
    stroke: var(--FLOW_EDGE_COLOR);
}

.flow_edge_arrow {
    fill: var(--FLOW_EDGE_COLOR);
}

.flow_edge_label {
    fill: var(--FLOW_EDGE_LABEL_COLOR);
    user-select: none;
}

.flow_state_group {
    cursor: grab;
}

.flow_state_group > text {
    user-select: none;
    fill: var(--FLOW_STATE_FG_COLOR);
}

.flow_state_group > rect {
    fill: var(--FLOW_STATE_BG_COLOR);
    stroke-width: 4;
    stroke: var(--FLOW_STATE_BORDER_COLOR);
}

.flow_state_group_active {
    cursor: grab;
}

.flow_state_group_active > text {
    user-select: none;
    fill: var(--FLOW_STATE_FG_COLOR);
}

.flow_state_group_active > rect {
    fill: var(--FLOW_STATE_BG_COLOR);
    stroke-width: 8;
    stroke: var(--FLOW_STATE_ACTIVE_BORDER_COLOR);
}