diff --git a/gulpfile.js b/gulpfile.js
index 0689988c23dcf..f8f40588253ec 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -17,7 +17,6 @@
 "use strict";
 
 const autoprefixer = require("autoprefixer");
-const postcssCalc = require("postcss-calc");
 const postcssDirPseudoClass = require("postcss-dir-pseudo-class");
 const postcssLogical = require("postcss-logical");
 const fs = require("fs");
@@ -853,7 +852,6 @@ function buildGeneric(defines, dir) {
     preprocessCSS("web/viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
@@ -936,7 +934,6 @@ function buildComponents(defines, dir) {
     preprocessCSS("web/pdf_viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
@@ -1033,7 +1030,6 @@ function buildMinified(defines, dir) {
     preprocessCSS("web/viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
diff --git a/package-lock.json b/package-lock.json
index 56d48474a14b1..b842af50e5c19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,6 @@
         "mkdirp": "^1.0.4",
         "needle": "^3.0.0",
         "postcss": "^8.4.7",
-        "postcss-calc": "^8.2.4",
         "postcss-dir-pseudo-class": "^6.0.4",
         "postcss-logical": "^5.0.4",
         "prettier": "^2.5.1",
@@ -14969,19 +14968,6 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
-    "node_modules/postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.2"
-      }
-    },
     "node_modules/postcss-dir-pseudo-class": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
@@ -30241,16 +30227,6 @@
         "source-map-js": "^1.0.2"
       }
     },
-    "postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
     "postcss-dir-pseudo-class": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
diff --git a/package.json b/package.json
index ab4613ab08fbd..f9ee1ef3ea8b4 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "mkdirp": "^1.0.4",
     "needle": "^3.0.0",
     "postcss": "^8.4.7",
-    "postcss-calc": "^8.2.4",
     "postcss-dir-pseudo-class": "^6.0.4",
     "postcss-logical": "^5.0.4",
     "prettier": "^2.5.1",
diff --git a/web/viewer.css b/web/viewer.css
index 20c5ae39cc65f..627fa98ec4de9 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -244,12 +244,12 @@ select {
 }
 html[dir="ltr"] #sidebarContainer {
   transition-property: left;
-  left: calc(0px - var(--sidebar-width));
+  left: calc(-1 * var(--sidebar-width));
   border-right: var(--doorhanger-border-color-whcm);
 }
 html[dir="rtl"] #sidebarContainer {
   transition-property: right;
-  right: calc(0px - var(--sidebar-width));
+  right: calc(-1 * var(--sidebar-width));
   border-left: var(--doorhanger-border-color-whcm);
 }