Negate a CSS variable

To use the negative value of a CSS variable, it must be wrapped in the calc function and multiplied by -1 like this: calc(var(--my-variable) * -1).

For example:
If there is a margin variable set to 20px and you need to offset it in the opposite direction to -20px.

:root {
  --margin: 20px;
}

/* Set margin-left of the container to -20px */
.container {
  margin-left: calc(var(--margin) * -1);
}

Simply adding - in front of the variable, like this -var(--margin), will not work.