From a04ea59c63f5645949043d106ba765332f8cd333 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Mon, 11 Jan 2021 12:20:24 +0100
Subject: [PATCH] fix(overlays): put tooltip arrow css props on host

---
 .changeset/tidy-cheetahs-drop.md    | 5 +++++
 packages/overlays/src/ArrowMixin.js | 7 +++++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tidy-cheetahs-drop.md

diff --git a/.changeset/tidy-cheetahs-drop.md b/.changeset/tidy-cheetahs-drop.md
new file mode 100644
index 000000000..ea91a4238
--- /dev/null
+++ b/.changeset/tidy-cheetahs-drop.md
@@ -0,0 +1,5 @@
+---
+'@lion/overlays': patch
+---
+
+Put tooltip arrow width and height css props on host of ArrowMixin.
diff --git a/packages/overlays/src/ArrowMixin.js b/packages/overlays/src/ArrowMixin.js
index d0a909a9c..912718b4c 100644
--- a/packages/overlays/src/ArrowMixin.js
+++ b/packages/overlays/src/ArrowMixin.js
@@ -30,14 +30,17 @@ export const ArrowMixinImplementation = superclass =>
       return [
         superCtor.styles || [],
         css`
+          :host {
+            --tooltip-arrow-width: 12px;
+            --tooltip-arrow-height: 8px;
+          }
+
           .arrow svg {
             display: block;
           }
 
           .arrow {
             position: absolute;
-            --tooltip-arrow-width: 12px;
-            --tooltip-arrow-height: 8px;
             width: var(--tooltip-arrow-width);
             height: var(--tooltip-arrow-height);
           }