CSS variables and computation in Nuxt.js components?

SafeArea.vue

<template>
  <div id="ebu-safe" class="overlay pm5644 safe-grid">
    <div id="action-safe" class="safe action-safe" />
    <div id="graphics-safe" class="safe graphics-safe" />
    <div id="caption-safe" class="safe caption-safe" />
  </div>
</template>
<style lang="css">
--height: 1080px;
--width: 1920px;
--action-safe: 0.035;
--action-safe-margin-x: calc(var(--width) * var(--action-safe));
--action-safe-margin-y: calc(var(--height) * var(--action-safe));
--graphics-safe: 0.05;
--graphics-safe-margin-x: calc(var(--width) * var(--graphics-safe));
--graphics-safe-margin-y: calc(var(--height) * var(--graphics-safe));
--caption-safe: 0.1625;
--caption-safe-margin-x: calc(var(--width) * var(--caption-safe));
--caption-safe-margin-y: calc(var(--height) * var(--graphics-safe));
/* https://tech.ebu.ch/docs/r/r095.pdf */
#ebu-safe {
  background: hsla(1, 0%, 0%, 0);
  position: absolute;
  top: 0;
  left: 0;
  height: var(--height);
  width: var(--width);
}
.safe {
  box-sizing: content-box;
  border: 2px dashed #fff;
  background-color: hsla(1, 0%, 0%, 0.2);
  color: #fff;
  font-size: 150%;
  padding: 2px;
}
#action-safe {
  position: absolute;
  left: var(--action-safe-margin-x);
  top: var(--action-safe-margin-y);
  height: calc(var(--height) - 2 * var(--action-safe-margin-y));
  width: calc(var(--width) - 2 * var(--action-safe-margin-x));
  z-index: 2;
  background-color: hsla(1, 0%, 0%, 0.3);
}
#graphics-safe {
  position: absolute;
  left: var(--graphics-safe-margin-x);
  top: var(--graphics-safe-margin-y);
  height: calc(var(--height) - 2 * var(--graphics-safe-margin-y));
  width: calc(var(--width) - 2 * var(--graphics-safe-margin-x));
  z-index: 3;
  background-color: hsla(1, 0%, 0%, 0);
}
#caption-safe {
  position: absolute;
  left: var(--caption-safe-margin-x);
  top: var(--caption-safe-margin-y);
  height: calc(var(--height) - 2 * var(--caption-safe-margin-y));
  width: calc(var(--width) - 2 * var(--caption-safe-margin-x));
  z-index: 5;
  background-color: hsla(1, 0%, 0%, 0.2);
}
#action-safe::before {
  content: 'Action Safe Area';
  top: -2rem;
  position: relative;
}

#graphics-safe::before {
  content: 'Graphics Safe Area';
}

#caption-safe::before {
  content: 'Caption Safe Area';
}
</style>