diff --git a/site/src/navigation/header/header.less b/site/src/navigation/header/header.less
index b1b02b4b8..2f8c9f465 100644
--- a/site/src/navigation/header/header.less
+++ b/site/src/navigation/header/header.less
@@ -85,11 +85,8 @@
   }
 
   &-share-popup.esl-popup {
-    &,
-    & > .esl-popup-arrow {
-      background: @landing-bg-color;
-      border-color: gray;
-    }
+    --esl-popup-background-color: @landing-bg-color;
+    --esl-popup-border-color: gray;
     .esl-share-list {
       margin: 0.75rem;
       gap: 0.25rem;
diff --git a/src/modules/esl-popup/README.md b/src/modules/esl-popup/README.md
index 86c5f431e..cc122c321 100644
--- a/src/modules/esl-popup/README.md
+++ b/src/modules/esl-popup/README.md
@@ -129,3 +129,15 @@ When you add a placeholder to the DOM tree, all attributes are copied from the o
 
  - `from` - static method that creates a placeholder for a given popup element
  - `$origin` - the original element that was here before it was replaced by a placeholder
+
+### Styles
+
+ESLPopup is a non-trivial component that calculates its position depending on user settings. So for styling, it would be advisable to use the basic styles that we provide with our library. You can easily override most of the rules from the base styles. Some properties are calculated, so you can't override them directly, but it is possible to set the value through CSS variables. For now, you can use the following variables:
+
+- `--esl-popup-arrow-size` - arrow size ('20px' by default)
+- `--esl-popup-background-color` - background color of the popup ('#fff' by default)
+- `--esl-popup-border-color` - popup border color ('#dbdbdb' by default)
+- `--esl-popup-border-width` - border width of the popup ('1px' by default)
+- `--esl-popup-z-index` - z-index of the popup ('999' by default)
+
+Or if you are using the LESS preprocessor, you can optionally use mixins instead of CSS variables. However, we would recommend using the general approach with CSS variables.
diff --git a/src/modules/esl-popup/core.less b/src/modules/esl-popup/core.less
index 1913b3641..03933abf3 100644
--- a/src/modules/esl-popup/core.less
+++ b/src/modules/esl-popup/core.less
@@ -1,7 +1 @@
-@import 'core.mixin.less';
-
-esl-popup:not(.esl-popup) {
-  display: none;
-}
-
-.esl-popup-init();
+@import './core/esl-popup.less';
diff --git a/src/modules/esl-popup/core.mixin.less b/src/modules/esl-popup/core.mixin.less
index 03933abf3..7b0af2e73 100644
--- a/src/modules/esl-popup/core.mixin.less
+++ b/src/modules/esl-popup/core.mixin.less
@@ -1 +1 @@
-@import './core/esl-popup.less';
+@import './core/esl-popup.mixin.less';
diff --git a/src/modules/esl-popup/core/esl-popup.less b/src/modules/esl-popup/core/esl-popup.less
index 4da71ded3..69170d09f 100644
--- a/src/modules/esl-popup/core/esl-popup.less
+++ b/src/modules/esl-popup/core/esl-popup.less
@@ -1,95 +1,84 @@
-.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
-                      @popupArrowSize: 20px,
-                      @popupBackgroundColor: #FFF,
-                      @popupBorderColor: #DBDBDB,
-                      @popupBorderWidth: 1px) {
-  @popupArrowHalf: (@popupArrowSize / 2);
-  @popupArrowShift: (
-    @popupArrowSize * 0.2071 - @popupBorderWidth
-  ); // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
+esl-popup:not(.esl-popup) {
+  display: none;
+}
+
+.esl-popup {
+  --_border-width: var(--esl-popup-border-width, 1px);
+  --_border: var(--_border-width) solid var(--esl-popup-border-color, #dbdbdb);
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0.5s 0.2s;
+  box-sizing: border-box;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  border: var(--_border);
+  background: var(--esl-popup-background-color, #fff);
+  cursor: default;
+  will-change: auto;
+
+  &[open] {
+    z-index: var(--esl-popup-z-index, 999);
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity 0.15s,
+      transform 0.2s;
+  }
 
-  .@{arrowClassName} {
+  &:not([open]) {
+    display: none;
+  }
+
+  .esl-popup-arrow {
+    --_size: var(--esl-popup-arrow-size, 20px);
+    --_half: calc(var(--_size) / 2);
+    --_shift: calc(0.2071 * var(--_size) - var(--_border-width));
+    // 0.2071 = (sqrt(2) - 1) / 2
     position: absolute;
-    top: (-@popupArrowHalf - @popupBorderWidth);
+    top: calc(-1 * var(--_half) - var(--_border-width));
     bottom: 100%;
     z-index: -1;
     transform: rotate(45deg);
-    width: @popupArrowSize;
-    height: @popupArrowSize;
-    margin-left: @popupArrowShift;
-    border-left: @popupBorderWidth solid @popupBorderColor;
-    border-top: @popupBorderWidth solid @popupBorderColor;
-    background: @popupBackgroundColor;
+    width: var(--_size);
+    height: var(--_size);
+    margin-left: var(--_shift);
+    border-left: var(--_border);
+    border-top: var(--_border);
+    background: inherit;
   }
 
   &[placed-at='top'] {
-    .@{arrowClassName} {
+    .esl-popup-arrow {
       top: auto;
-      bottom: (-@popupArrowHalf - @popupBorderWidth);
+      bottom: calc(-1 * var(--_half) - var(--_border-width));
       transform: rotate(225deg);
     }
   }
 
   &[placed-at='left'] {
-    .@{arrowClassName} {
-      right: (-@popupArrowHalf - @popupBorderWidth);
+    .esl-popup-arrow {
+      right: calc(-1 * var(--_half) - var(--_border-width));
       left: auto;
       transform: rotate(135deg);
-      margin-top: @popupArrowShift;
+      margin-top: var(--_shift);
     }
   }
 
   &[placed-at='right'] {
-    .@{arrowClassName} {
-      left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
+    .esl-popup-arrow {
+      left: calc(-1 * var(--_half) - var(--_border-width) - var(--_shift));
       right: auto;
       transform: rotate(315deg);
-      margin-top: @popupArrowShift;
+      margin-top: var(--_shift);
     }
   }
 
   &.disable-arrow {
-    .@{arrowClassName} {
-      display: none;
-    }
-  }
-}
-
-.esl-popup-init(@className: esl-popup,
-                @arrowClassName: esl-popup-arrow,
-                @arrowSize: 20px,
-                @backgroundColor: #FFF,
-                @borderColor: #DBDBDB,
-                @borderWidth: 1px,
-                @zIndex: 999) {
-  .@{className} {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: block;
-    opacity: 0;
-    visibility: hidden;
-    transition: visibility 0.5s 0.2s;
-    box-sizing: border-box;
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-    border: @borderWidth solid @borderColor;
-    background: @backgroundColor;
-    cursor: default;
-    will-change: auto;
-
-    &[open] {
-      z-index: @zIndex;
-      opacity: 1;
-      visibility: visible;
-      transition:
-        opacity 0.15s,
-        transform 0.2s;
-    }
-
-    &:not([open]) {
+    .esl-popup-arrow {
       display: none;
     }
-
-    .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
   }
 }
diff --git a/src/modules/esl-popup/core/esl-popup.mixin.less b/src/modules/esl-popup/core/esl-popup.mixin.less
new file mode 100644
index 000000000..4da71ded3
--- /dev/null
+++ b/src/modules/esl-popup/core/esl-popup.mixin.less
@@ -0,0 +1,95 @@
+.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
+                      @popupArrowSize: 20px,
+                      @popupBackgroundColor: #FFF,
+                      @popupBorderColor: #DBDBDB,
+                      @popupBorderWidth: 1px) {
+  @popupArrowHalf: (@popupArrowSize / 2);
+  @popupArrowShift: (
+    @popupArrowSize * 0.2071 - @popupBorderWidth
+  ); // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
+
+  .@{arrowClassName} {
+    position: absolute;
+    top: (-@popupArrowHalf - @popupBorderWidth);
+    bottom: 100%;
+    z-index: -1;
+    transform: rotate(45deg);
+    width: @popupArrowSize;
+    height: @popupArrowSize;
+    margin-left: @popupArrowShift;
+    border-left: @popupBorderWidth solid @popupBorderColor;
+    border-top: @popupBorderWidth solid @popupBorderColor;
+    background: @popupBackgroundColor;
+  }
+
+  &[placed-at='top'] {
+    .@{arrowClassName} {
+      top: auto;
+      bottom: (-@popupArrowHalf - @popupBorderWidth);
+      transform: rotate(225deg);
+    }
+  }
+
+  &[placed-at='left'] {
+    .@{arrowClassName} {
+      right: (-@popupArrowHalf - @popupBorderWidth);
+      left: auto;
+      transform: rotate(135deg);
+      margin-top: @popupArrowShift;
+    }
+  }
+
+  &[placed-at='right'] {
+    .@{arrowClassName} {
+      left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
+      right: auto;
+      transform: rotate(315deg);
+      margin-top: @popupArrowShift;
+    }
+  }
+
+  &.disable-arrow {
+    .@{arrowClassName} {
+      display: none;
+    }
+  }
+}
+
+.esl-popup-init(@className: esl-popup,
+                @arrowClassName: esl-popup-arrow,
+                @arrowSize: 20px,
+                @backgroundColor: #FFF,
+                @borderColor: #DBDBDB,
+                @borderWidth: 1px,
+                @zIndex: 999) {
+  .@{className} {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0.5s 0.2s;
+    box-sizing: border-box;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+    border: @borderWidth solid @borderColor;
+    background: @backgroundColor;
+    cursor: default;
+    will-change: auto;
+
+    &[open] {
+      z-index: @zIndex;
+      opacity: 1;
+      visibility: visible;
+      transition:
+        opacity 0.15s,
+        transform 0.2s;
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
+  }
+}