From 4ea547217023082b2d8b18c22cb63b3912ecb607 Mon Sep 17 00:00:00 2001
From: Pio Rasch-Halvorsen <pio.rasch-halvorsen@fremtind.no>
Date: Fri, 20 Sep 2024 21:58:01 +0200
Subject: [PATCH] fix: gi ikonet til PopupTip stor nok trykkflate

ISSUES CLOSED: #4107
---
 .../src/components/tooltip/styles/tooltip.scss   | 16 ++++++++++++++++
 packages/tooltip/tooltip.scss                    | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/packages/jokul/src/components/tooltip/styles/tooltip.scss b/packages/jokul/src/components/tooltip/styles/tooltip.scss
index eb6ed7a15d6..e8dbf06b004 100644
--- a/packages/jokul/src/components/tooltip/styles/tooltip.scss
+++ b/packages/jokul/src/components/tooltip/styles/tooltip.scss
@@ -89,6 +89,7 @@ $_focus-ring-width: jkl.rem(2px);
     @include jkl.motion("exit", "snappy");
     transition-property: color;
     cursor: pointer;
+    position: relative;
     background-color: transparent;
     padding: 0;
     display: inline-flex;
@@ -96,10 +97,25 @@ $_focus-ring-width: jkl.rem(2px);
     color: var(--button-color);
     transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
     font-size: 1.2em;
+    border-radius: 9999px;
 
     @include jkl.reset-outline;
 
     &:hover {
         --button-color: var(--jkl-color-text-interactive-hover);
     }
+
+    &:focus-visible {
+        @include jkl.focus-outline(0);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+        min-width: 44px;
+        min-height: 44px;
+    }
 }
diff --git a/packages/tooltip/tooltip.scss b/packages/tooltip/tooltip.scss
index 83c424d89b4..0d523da8fb3 100644
--- a/packages/tooltip/tooltip.scss
+++ b/packages/tooltip/tooltip.scss
@@ -89,6 +89,7 @@ $_focus-ring-width: jkl.rem(2px);
     @include jkl.motion("exit", "snappy");
     transition-property: color;
     cursor: pointer;
+    position: relative;
     background-color: transparent;
     padding: 0;
     display: inline-flex;
@@ -96,10 +97,25 @@ $_focus-ring-width: jkl.rem(2px);
     color: var(--button-color);
     transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
     font-size: 1.2em;
+    border-radius: 9999px;
 
     @include jkl.reset-outline;
 
     &:hover {
         --button-color: var(--jkl-color-text-interactive-hover);
     }
+
+    &:focus-visible {
+        @include jkl.focus-outline(0);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+        min-width: 44px;
+        min-height: 44px;
+    }
 }