desktop menu links, arrows

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -19,13 +19,6 @@
     padding: 0;
     width: 100%;
 
-    li {
-      //width: min-content;
-      //min-width: min-content;
-      //max-width: max-content;
-      //width: 100%;
-    }
-
     // First level menu items
     .desktop-menu-link {
       background-color: transparent;
@@ -42,10 +35,8 @@
         border-top: 0 none;
         display: flex;
         flex-direction: row;
-        //flex-flow: wrap;
         justify-content: center;
         letter-spacing: -0.6px;
-        //padding: 10px 8px;
         padding: 0 7px;
         position: relative;
         text-transform: uppercase;
@@ -54,20 +45,17 @@
       @include breakpoint($xlarge) {
         @include font-size(16px, 16px);
         letter-spacing: -0.7px;
-        //padding: 10px;
         padding: 0 9px;
       }
 
       // Underline if link is in active trail.
-      &--is-active-trail {
-        @include breakpoint($extrawide) {
-          //border-bottom: 4px solid var(--brand-main-nearly-black);
-          //padding-bottom: 8px;
-        }
-
-        @include breakpoint($xlarge) {
-          //padding-bottom: 12px;
-        }
+      &--is-active-trail::after {
+        border-bottom: 4px solid var(--brand-main-nearly-black);
+        bottom: -12px;
+        content: ' ';
+        position: absolute;
+        right: 0;
+        width: 100%;
       }
 
       &__label {
@@ -87,6 +75,7 @@
         svg {
           height: 5.63px;
           width: 8px;
+
           @include breakpoint($xlarge) {
             height: 7.03px;
             width: 10px;
@@ -94,24 +83,20 @@
         }
       }
 
-      // On hover: change background and show heading icon.
+      // On hover: heading icon is turned 180deg and grows bigger.
       &--is-active {
-        //background-color: var(--grayscale-background-box);
-        //padding: 35px 10px;
         position: relative;
 
-        .desktop-menu-link__heading__icon {
-          //bottom: 0;
-          //display: block;
-          //left: 0;
-          //position: absolute;
-          //width: 100%;
+        hy-icon {
+          transform: rotateX(180deg);
 
-          hy-icon {
-            //justify-content: center;
-            transform: rotateX(180deg);
-            svg {
-              //padding: 8px 0;
+          svg {
+            height: 8px;
+            width: 10px;
+
+            @include breakpoint($xlarge) {
+              height: 8.44px;
+              width: 12px;
             }
           }
         }
@@ -163,18 +148,15 @@
         margin-top: 6px;
 
         &__menu-items {
-          //@todo check max-with in Specs
-          min-width: 450px;
-          max-width: 550px;
+          min-width: 440px;
+          max-width: 540px;
         }
 
         // first level link inside panel
         &__first-level-menu-item {
           @include font-weight($bold);
-          //align-items: center;
           color: var(--brand-main-nearly-black);
           display: flex;
-          //flex-direction: row;
           font-family: var(--main-font-family);
           text-decoration: none;
           width: 100%;
@@ -182,7 +164,6 @@
           @include breakpoint($extrawide) {
             @include font-size(24px, 32px);
             align-items: flex-start;
-            //background-color: var(--grayscale-background-box);
             background-color: var(--grayscale-white);
             flex-direction: column;
             letter-spacing: -0.75px;