/*@charset "UTF-8";*/
/* gaps are managed by the user */


/* punctuation */

.colon-suffix::after {
	content: ":";
}

.parens::before {
	content: "(";
}
.parens::after {
	content: ")";
}

.brackets::before {
	content: "[";
}
.brackets::after {
	content: "]";
}

.braces::before {
	content: "{";
}
.braces::after {
	content: "}";
}

.quotes::before {
	content: open-quote;
}
.quotes::after {
	content: close-quote;
}

.star-prefix::before {
	content: "*";
}

/* does not work */
/*.triple-quotes::before {
	content: open-quote open-quote open-quote;
}
.triple-quotes::after {
	content: close-quote close-quote close-quote;
}*/


/*
 TODO: (?) use a .comma-suffix class on every item instead of .comma-sep

 .comma-sep either has side effects on child rendering,
 or needs additional code (.gap on parent and .row on children)
 to work properly

 having side effects on children rendering creates unexpected surprises from elements not rendering properly and needing a wrapper
 (but the wrapper could be abstracted with functions)

 but .comma-suffix would also need micro-management of elements

 */

/* "+ div" means: has a div as a next sibling */
/*.comma-separated {
	gap: 5px;
}*/
/*.comma-sep > div:has(+ div) {
	flex-direction: row;
}*/
/*.comma-sep > div:has(+ div)::after {
	content: ",";
}*/



/* keyword prefixes */

.def-prefix::before {
	content: "def";
}

.with-prefix::before {
	content: "with";
}

.import-prefix::before {
	content: "import";
}
.import-prefix {
	gap: 5px;
}

.from-prefix::before {
	content: "from";
}
.from-prefix {
	gap: 5px;
}

.assert-prefix::before {
	content: "assert";
}

.for-prefix::before {
	content: "for";
}

.if-prefix::before {
	content: "if";
}
.elif-prefix::before {
	content: "elif";
}
.else-prefix::before {
	content: "else";
}

/* f-string prefix */
.f-prefix::before {
	content: "f";
}

.return-prefix::before {
	content: "return";
}

.raise-prefix::before {
	content: "raise";
}

.while-prefix::before {
	content: "while";
}

.class-prefix::before {
	content: "class";
}

.nonlocal-prefix::before {
	content: "nonlocal";
}

.match-prefix::before {
	content: "match";
}
.case-prefix::before {
	content: "case";
}



/* separators */

.comma-sep > div + div::before {
	content: ",";
}
.equal-sep > div + div::before {
	content: "=";
}
.dot-sep > div + div::before {
	content: ".";
}
.return-type-arrow-sep > div + div::before {
	content: "->";
}
.colon-sep > div + div::before {
	content: ":";
}

/* keyword separators */
.in-sep > div + div::before {
	content: "in";
}
.and-sep > div + div::before {
	content: "and";
}
.or-sep > div + div::before {
	content: "or";
}
.as-sep > div + div::before {
	content: "as";
}


/* operator rendering */
/*
this code (defining a css variable with attr()) only works if the browser supports the CSS level 4 specification,
which allows using attr() inside css variable definitions
(which are inherited)

Pywebview does not seem to support it even in the latest version
(tested on pywebview==6.1 with pypy)

To bypass this limitation, we set the attribute directly on the node with the css rule.

In the meantime, we still set the data-operator attribute on the .operation Element even if it is not used.


*/
/*.operation {
	--operator: attr(data-operator);
}*/

.operation > div + div::before {
  /*content: var(--operator);*/
  content: attr(data-operator);
}

