From 3013abe40437e5c66daaa9b8828c29e540fc73f6 Mon Sep 17 00:00:00 2001
From: Peter Hellstrand <peter.hellstrand@sparebank1.no>
Date: Fri, 21 Jun 2024 14:34:00 +0200
Subject: [PATCH] refactor(ffe-accordion): fjerner obrukt css og fikser
 styleint advarsel

---
 packages/ffe-accordion/less/accordion.less | 59 +++++++---------------
 1 file changed, 17 insertions(+), 42 deletions(-)

diff --git a/packages/ffe-accordion/less/accordion.less b/packages/ffe-accordion/less/accordion.less
index 704ce47190..841f53e28c 100644
--- a/packages/ffe-accordion/less/accordion.less
+++ b/packages/ffe-accordion/less/accordion.less
@@ -9,6 +9,10 @@
 }
 
 .ffe-accordion-item {
+    --icon-color: var(--ffe-v-accordion-primary-color);
+    --icon-border-color: var(--ffe-v-accordion-primary-color);
+    --icon-background-color: var(--ffe-v-accordion-secondary-color);
+
     margin-bottom: var(--ffe-spacing-xs);
     transition: margin-bottom var(--ffe-transition-duration)
         var(--ffe-ease-in-out-back);
@@ -17,13 +21,10 @@
     border: 2px solid transparent;
     background-color: var(--ffe-v-accordion-secondary-color);
 
-    &__heading {
-        margin: 0;
-    }
-
     &__heading,
     &__body {
         overflow-wrap: anywhere;
+        margin: 0;
     }
 
     &__heading-button {
@@ -38,17 +39,8 @@
 
         @media (hover: hover) and (pointer: fine) {
             &:hover {
-                .ffe-accordion-item__heading-icon {
-                    transition: fill var(--ffe-transition-duration)
-                        var(--ffe-ease);
-                    color: var(--ffe-v-accordion-secondary-color);
-                }
-
-                .ffe-accordion-item__heading-icon-wrapper {
-                    transition: background-color var(--ffe-transition-duration)
-                        var(--ffe-ease);
-                    background-color: var(--ffe-v-accordion-primary-color);
-                }
+                --icon-color: var(--ffe-v-accordion-secondary-color);
+                --icon-background-color: var(--ffe-v-accordion-primary-color);
             }
         }
 
@@ -68,16 +60,21 @@
 
     &__heading-icon-wrapper {
         line-height: 0;
-        border: 1px solid var(--ffe-v-accordion-primary-color);
+        border: 1px solid var(--icon-border-color);
         border-radius: 50%;
         padding: var(--ffe-spacing-xs);
+        background: var(--icon-background-color);
+        transition: background-color var(--ffe-transition-duration)
+            var(--ffe-ease);
     }
 
-    &__heading-icon {
+    &__heading-icon.ffe-icons {
+        display: block;
         flex: 0 0 auto;
-        color: var(--ffe-v-accordion-primary-color);
-        transition: transform var(--ffe-transition-duration)
-            var(--ffe-ease-in-out-back);
+        color: var(--icon-color);
+        transition:
+            transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back),
+            color var(--ffe-transition-duration) var(--ffe-ease);
     }
 
     &__body {
@@ -100,25 +97,3 @@
         border-color: var(--ffe-v-accordion-focus-border-color);
     }
 }
-
-.native & {
-    @media (prefers-color-scheme: dark) {
-        .ffe-accordion-item {
-            &__heading-icon {
-                color: var(--ffe-v-accordion-primary-color);
-            }
-
-            @media (hover: hover) and (pointer: fine) {
-                &:hover {
-                    .ffe-accordion-item__heading-icon {
-                        color: var(--ffe-v-accordion-secondary-color);
-                    }
-
-                    .ffe-accordion-item__heading-icon-wrapper {
-                        background-color: var(--ffe-v-accordion-primary-color);
-                    }
-                }
-            }
-        }
-    }
-}