Overridable $header-height SCSS variable

What does this MR do and why?

This MR starts on #327867 (closed)

It sets the $header-height SCSS variable as var(--header-height, 40px) and updates all usage of the variable to be wrapped with calc.

This change makes it possible to override the header height by simply setting a --header-height CSS variable instead of updating all places where $header-height is used. For instance, in !76076 (merged) we want to set the header height to 72px (instead of 40px) and it was implemented by adding a $additional-height to all places where $header-height was used.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.