Overwriting css variables in selector scope does not update gradient angle

Question

:root {
    --color-primary: #1999CC;
    --gr-deg-x: 270deg;
    --gr-primary-fade-x: linear-gradient(var(--gr-deg-x), var(--color-primary) 0%, rgba(0, 0, 0, 0) 50%);
}

.myselector {
    --gr-deg-x: 180deg;
    background: var(--gr-primary-fade-x);
  height: 100px;
  width: 100%;
}

<div class="myselector"></div>

The background gradient angle for .myselector is still 270deg instead of 180deg. What am I missing?