From 7743c1a22f8a65e0757b47e29669b2b50e515675 Mon Sep 17 00:00:00 2001
From: ExileofAranei <anoceanofmyownregret@gmail.com>
Date: Sat, 4 Dec 2021 00:49:22 +0300
Subject: [PATCH] compensate scrollbar via CSS variable

---
 src/Fancybox/Fancybox.js    | 2 +-
 src/Fancybox/scss/base.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Fancybox/Fancybox.js b/src/Fancybox/Fancybox.js
index 9a7e4b3..277f5a6 100644
--- a/src/Fancybox/Fancybox.js
+++ b/src/Fancybox/Fancybox.js
@@ -746,7 +746,7 @@ class Fancybox extends Base {
 
       $style.id = id;
       $style.type = "text/css";
-      $style.innerHTML = `.compensate-for-scrollbar {padding-right: ${scrollbarWidth}px;}`;
+      $style.innerHTML = `.compensate-for-scrollbar {--fancybox-scrollbar-compensate: ${scrollbarWidth}px;}`;
 
       document.getElementsByTagName("head")[0].appendChild($style);
 
diff --git a/src/Fancybox/scss/base.scss b/src/Fancybox/scss/base.scss
index f46e6cd..eb99585 100644
--- a/src/Fancybox/scss/base.scss
+++ b/src/Fancybox/scss/base.scss
@@ -5,6 +5,7 @@ html.with-fancybox {
 body.compensate-for-scrollbar {
   overflow: hidden !important;
   touch-action: none;
+  padding-right: var(--fancybox-scrollbar-compensate, 0);
 }
 
 .fancybox__container {