Can I multiply a css var with a negative number?

Question

I have a css variable:

:root {
    --report-padding-top: 50;
    --report-margin-header: calc(var(--report-padding-top) * -1);
}

Can I do this?

.header {
    margin-top: var(--report-margin-header) ;
}

Answer 1

yes , you can have negative properties in css and the right way to do that is to multiply the value by -1 using calc() function:

.class {
  margin-top: calc(var(--margin-md) * -1);
}