srcdev-nuxt-components 4.0.6 → 5.0.1

package/components/responsive-header/ResponsiveHeader.vue

@@ -1,30 +1,51 @@
 <template>
-  <div class="navigation" :class="[elementClasses, { loaded: navLoaded }]" ref="navigationWrapper">
-    <nav class="main-navigation" ref="mainNav">
-
-      <ul v-for="(navGroup, groupKey) in responsiveNavLinks" :key="groupKey" class="main-navigation-list"
-        :ref="el => setNavRef(String(groupKey), el as HTMLUListElement | null)">
+  <div class="navigation" :class="[elementClasses, { loaded: navLoaded }]" ref="navigationWrapper" role="banner">
+    <nav class="main-navigation" ref="mainNav" aria-label="Main navigation">
+      <ul v-for="(navGroup, groupKey) in responsiveNavLinks" :key="groupKey" class="main-navigation-list" :ref="el => setNavRef(String(groupKey), el as HTMLUListElement | null)">
         <template v-for="(link, localIndex) in navGroup" :key="localIndex">
-          <li v-if="link.path" class="main-navigation-item"
+          <li
+            v-if="link.path"
+            class="main-navigation-item"
             :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
             :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
-            ref="mainNavigationItems" :data-group-key="groupKey" :data-local-index="localIndex">
-            <NuxtLink class="main-navigation-link" :to="link.path">{{ link.name }}</NuxtLink>
+            ref="mainNavigationItems"
+            :data-group-key="groupKey"
+            :data-local-index="localIndex"
+            @mouseenter="handleNavigationItemHover"
+            @focusin="handleNavigationItemHover"
+          >
+            <NuxtLink class="main-navigation-link" :class="{ 'has-icon': link.iconName }" :to="link.path">
+              <Icon v-if="link.iconName" :name="link.iconName" class="decorator-icon" aria-hidden="true" />
+              {{ link.name }}
+            </NuxtLink>
           </li>
-          <li v-else class="main-navigation-item"
+          <li
+            v-else
+            class="main-navigation-item"
             :class="{ 'visually-hidden': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
             :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
-            ref="mainNavigationItems" :data-group-key="groupKey" :data-local-index="localIndex">
+            ref="mainNavigationItems"
+            :data-group-key="groupKey"
+            :data-local-index="localIndex"
+          >
             <details class="main-navigation-details" name="navigation-group" ref="navigationDetails">
-              <summary @mouseenter="handleSummaryHover($event)" @focusin="handleSummaryHover($event)"
-                class="main-navigation-details-summary has-toggle-icon">
-                <Icon name="mdi:chevron-down" class="icon" />
+              <summary
+                @mouseenter="handleSummaryHover($event)"
+                @focusin="handleSummaryHover($event)"
+                @click.prevent="handleSummaryAction($event)"
+                @keypup.prevent.stop="handleSummaryAction($event)"
+                class="main-navigation-details-summary has-toggle-icon"
+                :aria-label="`${link.childLinksTitle} submenu`"
+              >
+                <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
+                <Icon v-if="link.iconName" :name="link.iconName" class="decorator-icon" aria-hidden="true" />
+
                 {{ link.childLinksTitle }}
               </summary>
-              <div class="main-navigation-sub-nav">
+              <div class="main-navigation-sub-nav" role="menu" :aria-labelledby="`summary-${groupKey}-${localIndex}`">
                 <ul class="main-navigation-sub-nav-list">
                   <li class="main-navigation-sub-nav-item" v-for="childLink in link.childLinks" :key="childLink.name">
-                    <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link">{{ childLink.name }}</NuxtLink>
+                    <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link" role="menuitem">{{ childLink.name }}</NuxtLink>
                   </li>
                 </ul>
               </div>
@@ -32,16 +53,14 @@
           </li>
         </template>
       </ul>
-
     </nav>
-    <nav class="secondary-navigation" ref="secondaryNav">
-      <details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]"
-        ref="overflowDetails" name="overflow-group">
+    <nav class="secondary-navigation" ref="secondaryNav" aria-label="Secondary navigation">
+      <details class="overflow-details" :class="[{ 'visually-hidden': !navLoaded || !showOverflowDetails }]" ref="overflowDetails" name="overflow-group">
         <summary class="overflow-details-summary has-toggle-icon">
-          <Icon :name="overflowDetailsSummaryIcons.more" class="icon" :class="[{ show: !allowNavigationCollapse }]" />
-          <Icon :name="overflowDetailsSummaryIcons.burger" class="icon" :class="[{ show: allowNavigationCollapse }]" />
+          <Icon :name="overflowDetailsSummaryIcons.more" class="icon" :class="[{ show: !allowNavigationCollapse }]" :aria-hidden="true" />
+          <Icon :name="overflowDetailsSummaryIcons.burger" class="icon" :class="[{ show: allowNavigationCollapse }]" :aria-hidden="true" />
         </summary>
-        <div class="overflow-details-nav">
+        <div class="overflow-details-nav" role="menu">
           <NavigationItems :main-navigation-state="mainNavigationState" />
         </div>
       </details>
@@ -52,7 +71,7 @@
         <div>
           <h2 class="heading-4">navigationWrapperRects</h2>
           <pre>{{ navigationWrapperRects }}</pre>
-          <hr>
+          <hr />
           <h2 class="heading-4">secondaryNavRects</h2>
           <pre>{{ secondaryNavRects }}</pre>
         </div>
@@ -83,32 +102,45 @@ const props = defineProps({
     default: {
       more: 'gravity-ui:ellipsis',
       burger: 'gravity-ui:bars',
-    }
-  },
-  collapseNavigationBelowWidth: {
-    type: Boolean,
-    default: true,
+    },
   },
   collapseBreakpoint: {
     type: Number,
-    default: 500, // px
+    default: null, // px
+  },
+  collapseAtMainNavIntersection: {
+    type: Boolean,
+    default: false,
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  allowExpandOnGesture: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const slots = useSlots();
 const hasSecondaryNavigation = computed(() => slots.secondaryNavigation !== undefined);
-
+const collapseNavigationBelowWidth = computed(() => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection);
+const collapseBreakpoint = ref(props.collapseBreakpoint);
 const navLoaded = ref(false);
 const navigationWrapperRef = useTemplateRef('navigationWrapper');
 
-const handleSummaryHover = (event: MouseEvent | FocusEvent) => {
+const closeAllNavigationDetails = () => {
+  navigationDetailsRefs.value?.forEach((element) => {
+    element?.removeAttribute('open');
+  });
+  overflowDetailsRef.value?.removeAttribute('open');
+};
+
+const toggleDetailsElement = (event: Event) => {
   const summaryElement = event.currentTarget as HTMLElement;
   const parentDetailsElement = summaryElement.closest('details');
   if (!parentDetailsElement) return;
+
   if (parentDetailsElement.hasAttribute('open')) {
     parentDetailsElement.removeAttribute('open');
   } else {
@@ -117,6 +149,39 @@ const handleSummaryHover = (event: MouseEvent | FocusEvent) => {
   overflowDetailsRef.value?.removeAttribute('open');
 };
 
+const handleSummaryHover = (event: MouseEvent | FocusEvent) => {
+  if (!props.allowExpandOnGesture) {
+    return;
+  }
+
+  // Close all other open navigation details first
+  const summaryElement = event.currentTarget as HTMLElement;
+  const parentDetailsElement = summaryElement.closest('details');
+
+  navigationDetailsRefs.value?.forEach((element) => {
+    if (element !== parentDetailsElement) {
+      element?.removeAttribute('open');
+    }
+  });
+  overflowDetailsRef.value?.removeAttribute('open');
+
+  // Then toggle the current one
+  toggleDetailsElement(event);
+};
+
+const handleNavigationItemHover = () => {
+  if (!props.allowExpandOnGesture) {
+    return;
+  }
+
+  // Close all open navigation details when hovering over regular nav items
+  closeAllNavigationDetails();
+};
+
+const handleSummaryAction = (event: MouseEvent | KeyboardEvent) => {
+  toggleDetailsElement(event);
+};
+
 const mainNavigationState = ref<ResponsiveHeaderState>({
   navListVisibility: {
     firstNav: false,
@@ -129,8 +194,8 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
 const navRefs = ref<Record<string, HTMLUListElement | null>>({});
 
 const setNavRef = (key: string, el: HTMLUListElement | null) => {
-  navRefs.value[key] = el
-}
+  navRefs.value[key] = el;
+};
 
 const navigationWrapperRects = ref<IFlooredRect | null>(null);
 const firstNavRef = ref<HTMLUListElement | null>(null);
@@ -165,7 +230,7 @@ const initTemplateRefs = async () => {
   firstNavRef.value = navRefs.value['firstNav'] as HTMLUListElement | null;
   secondNavRef.value = navRefs.value['secondNav'] as HTMLUListElement | null;
   return;
-}
+};
 
 const getFlooredRect = (rect: DOMRect | null) => {
   if (!rect) return null;
@@ -177,21 +242,30 @@ const getFlooredRect = (rect: DOMRect | null) => {
     width: Math.floor(rect.width),
     height: Math.floor(rect.height),
   };
-}
+};
 
 const updateNavigationConfig = async (source: string) => {
   navigationWrapperRects.value = getFlooredRect((navigationWrapperRef.value && navigationWrapperRef.value.getBoundingClientRect()) ?? null) || null;
   secondaryNavRects.value = getFlooredRect((secondaryNavRef.value && secondaryNavRef.value.getBoundingClientRect()) ?? null) || null;
   firstNavRects.value = getFlooredRect((firstNavRef.value && firstNavRef.value.getBoundingClientRect()) ?? null) || null;
   secondNavRects.value = getFlooredRect((secondNavRef.value && secondNavRef.value.getBoundingClientRect()) ?? null) || null;
-}
+
+  if (collapseNavigationBelowWidth.value && firstNavRects.value) {
+    collapseBreakpoint.value = firstNavRects.value?.right;
+  }
+};
 
 const allowNavigationCollapse = computed(() => {
-  return props.collapseNavigationBelowWidth && navigationWrapperRects.value && navigationWrapperRects.value.width < props.collapseBreakpoint;
+  return (
+    collapseNavigationBelowWidth.value &&
+    navigationWrapperRects.value &&
+    secondaryNavRects.value !== null &&
+    Math.floor(secondaryNavRects.value.left - props.gapBetweenFirstAndSecondNav) <= collapseBreakpoint.value
+  );
 });
 
 const determineNavigationItemVisibility = (rect: DOMRect) => {
-  // Check if navigation should be collapsed based on width
+  // Check if navigation should be collapsed based on width breakpoint
   if (allowNavigationCollapse.value) {
     return false;
   }
@@ -209,7 +283,6 @@ const initMainNavigationState = () => {
   if (!mainNavigationItemsRefs.value) return;
 
   mainNavigationItemsRefs.value.forEach((item, index) => {
-
     const rect = item.getBoundingClientRect();
 
     const groupKey = item.dataset.groupKey;
@@ -243,11 +316,10 @@ const initMainNavigationState = () => {
     } else if (typeof groupKey === 'string') {
       mainNavigationState.value.navListVisibility[groupKey] = true;
     }
-  })
-
-}
+  });
+};
 
-onMounted(async() => {
+onMounted(async () => {
   await initTemplateRefs().then(() => {
     setTimeout(() => {
       navLoaded.value = true;
@@ -260,14 +332,15 @@ onMounted(async() => {
     });
   });
   // Add onClickOutside to overflowDetailsRef
-  overflowDetailsRef.value && onClickOutside(overflowDetailsRef.value, () => {
-    overflowDetailsRef.value?.removeAttribute('open');
-  });
+  overflowDetailsRef.value &&
+    onClickOutside(overflowDetailsRef.value, () => {
+      overflowDetailsRef.value?.removeAttribute('open');
+    });
 });
 
 useResizeObserver(navigationWrapperRef, async () => {
-  await updateNavigationConfig("useResizeObserver").then(() => {
-    initMainNavigationState()
+  await updateNavigationConfig('useResizeObserver').then(() => {
+    initMainNavigationState();
   });
 });
 
@@ -282,305 +355,332 @@ watch(
 </script>
 
 <style lang="css">
-
-  .navigation {
-
-    ul,
-    ol {
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-
-      li {
-        /* text-box-trim: trim-both; */
-        /* text-box-edge: cap alphabetic; */
-        display: flex;
-        align-items: center;
-      }
+.navigation {
+  ul,
+  ol {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      /* text-box-trim: trim-both; */
+      /* text-box-edge: cap alphabetic; */
+      display: flex;
+      align-items: center;
     }
+  }
 
-    --_link-visibility-transition: none;
-
-    &.loaded {
-      --_link-visibility-transition: all 0.2s ease-in-out;
-    }
+  --_link-visibility-transition: none;
 
-    /* flex-grow: 1; */
-    display: grid;
-    grid-template-areas: 'navStack';
+  &.loaded {
+    --_link-visibility-transition: all 0.2s ease-in-out;
+  }
 
-    margin: 12px;
-    border-radius: 8px;
-    background-color: #efefef05;
-    border: 1px solid #efefef75;
-    padding: 12px;
+  /* flex-grow: 1; */
+  display: grid;
+  grid-template-areas: 'navStack';
+
+  margin: 12px;
+  border-radius: 8px;
+  background-color: #efefef05;
+  border: 1px solid #efefef75;
+  padding: 12px;
+
+  .main-navigation {
+    /* Set up some global vars */
+    --_link-padding-block: 0.8rem;
+    --_link-padding-inline: 0.2rem;
+    --_link-margin-block: 0.1rem;
+    --_link-margin-inline: 0.1rem;
+    --_link-focus-visible-outline-width: 0.2rem;
+    --_link-border-default: 2px solid transparent;
+    --_link-border-bottom-hover: var(--green-8);
+
+    grid-area: navStack;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    justify-content: space-between;
+    gap: 60px;
+
+    overflow-x: hidden;
+    margin-inline-end: v-bind(mainNavigationMarginBlockEndStr);
+
+    &.collapsed {
+      justify-content: flex-start;
+    }
 
-    .main-navigation {
-      grid-area: navStack;
+    .main-navigation-list {
       display: flex;
       flex-wrap: nowrap;
-      flex-grow: 1;
-      justify-content: space-between;
-      gap: 60px;
 
-      overflow-x: hidden;
-      margin-inline-end: v-bind(mainNavigationMarginBlockEndStr);
+      &:nth-of-type(1) {
+        gap: 30px;
+      }
 
-      &.collapsed {
-        justify-content: flex-start;
+      &:nth-of-type(2) {
+        gap: 30px;
       }
 
-      .main-navigation-list {
-        display: flex;
-        flex-wrap: nowrap;
+      .main-navigation-item {
+        width: var(--_main-navigation-item-width);
+        overflow: hidden;
+        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+        padding-block: var(--_link-focus-visible-outline-width);
+        padding-inline: var(--_link-focus-visible-outline-width);
+
+        .main-navigation-link {
+          display: flex;
+          gap: 6px;
+          text-wrap-mode: nowrap;
+          color: inherit;
+          text-decoration: none;
+          margin-inline-start: 0;
+          transition: var(--_link-visibility-transition);
+
+          padding-block: var(--_link-padding-block);
+          padding-inline: var(--_link-padding-inline);
+          margin-block: var(--_link-margin-block);
+          margin-inline: var(--_link-margin-inline);
+          border-bottom: var(--_link-border-default);
 
-        &:nth-of-type(1) {
-          gap: 30px;
+          &:hover {
+            cursor: pointer;
+            border-bottom-color: var(--_link-border-bottom-hover);
+          }
         }
 
-        &:nth-of-type(2) {
-          gap: 30px;
-        }
+        .main-navigation-details {
+          --_icon-transform: scaleY(1);
 
-        .main-navigation-item {
+          margin-inline-start: 0;
+          transition: var(--_link-visibility-transition);
 
-          width: var(--_main-navigation-item-width);
-          overflow: hidden;
-          transition:
-            opacity 0.2s ease-in-out,
-            visibility 0.2s ease-in-out;
+          &[open] {
+            --_icon-transform: scaleY(-1);
 
-          .main-navigation-link {
-            display: flex;
-            text-wrap-mode: nowrap;
-            color: inherit;
-            text-decoration: none;
-            margin-inline-start: 0;
-            transition: var(--_link-visibility-transition);
+            .main-navigation-details-summary {
+              border-bottom-color: var(--_link-border-bottom-hover);
+            }
           }
 
-          .main-navigation-details {
-
-            --_icon-transform: scaleY(1);
-
-            margin-inline-start: 0;
-            transition: var(--_link-visibility-transition);
+          .has-toggle-icon {
+            display: flex;
+            gap: 6px;
+            text-wrap-mode: nowrap;
 
-            &[open] {
-              --_icon-transform: scaleY(-1);
+            .icon {
+              display: block;
+              transform: var(--_icon-transform);
+              transition: transform 0.2s ease-in-out;
             }
+          }
 
-            .has-toggle-icon {
-              display: flex;
-              gap: 6px;
-              text-wrap-mode: nowrap;
+          .main-navigation-details-summary {
+            padding-block: var(--_link-padding-block);
+            padding-inline: var(--_link-padding-inline);
+            margin-block: var(--_link-margin-block);
+            margin-inline: var(--_link-margin-inline);
+            border-bottom: var(--_link-border-default);
 
-              .icon {
-                display: block;
-                transform: var(--_icon-transform);
-                transition: transform 0.2s ease-in-out;
-              }
+            &::-webkit-details-marker,
+            &::marker {
+              display: none;
             }
 
-            .main-navigation-details-summary {
-
-              &::-webkit-details-marker,
-              &::marker {
-                display: none;
-              }
-
-              &:hover {
-                cursor: pointer;
-              }
-
+            &:hover {
+              cursor: pointer;
+              border-bottom-color: var(--_link-border-bottom-hover);
             }
 
-            .main-navigation-sub-nav {
-              position: absolute;
-              padding: 12px;
-              border: 1px solid #efefef75;
-              border-radius: 8px;
-              background-color: #000;
-              translate: 0 12px;
+            .decorator-icon {
+              margin-inline-start: 8px;
+            }
+          }
 
-              min-width: var(--_main-navigation-item-width);
+          .main-navigation-sub-nav {
+            position: absolute;
+            padding: 12px;
+            border: 1px solid #efefef75;
+            border-radius: 8px;
+            background-color: #000;
+            translate: 0 12px;
 
-              .main-navigation-sub-nav-list {
+            min-width: var(--_main-navigation-item-width);
 
-                display: grid;
-                grid-template-columns: repeat(2, auto);
-                gap: 12px;
+            .main-navigation-sub-nav-list {
+              display: grid;
+              grid-template-columns: repeat(2, auto);
+              gap: 12px;
 
-                .main-navigation-sub-nav-item {
-                  margin-bottom: 8px;
+              .main-navigation-sub-nav-item {
+                margin-bottom: 8px;
 
-                  &:last-child {
-                    margin-bottom: 0;
-                  }
+                &:last-child {
+                  margin-bottom: 0;
+                }
 
-                  .main-navigation-sub-nav-link {
-                    display: block;
-                    text-wrap-mode: nowrap;
-                    text-decoration: none;
-                    color: inherit;
-                  }
+                .main-navigation-sub-nav-link {
+                  display: block;
+                  text-wrap-mode: nowrap;
+                  text-decoration: none;
+                  color: inherit;
                 }
               }
             }
           }
+        }
 
-          &.visually-hidden {
-            visibility: hidden;
-            opacity: 0;
+        &.visually-hidden {
+          visibility: hidden;
+          opacity: 0;
 
-            .main-navigation-details,
-            .main-navigation-link {
-              margin-inline-start: var(--_main-navigation-item-width);
-            }
+          .main-navigation-details,
+          .main-navigation-link {
+            margin-inline-start: var(--_main-navigation-item-width);
           }
         }
       }
     }
+  }
 
-    .secondary-navigation {
-      grid-area: navStack;
-      justify-self: end;
-
-      display: flex;
-      gap: 12px;
-      align-items: center;
-
-      .secondary-navigation-list {
+  .secondary-navigation {
+    grid-area: navStack;
+    justify-self: end;
 
-        .secondary-navigation-item {
+    display: flex;
+    gap: 12px;
+    align-items: center;
 
-          .secondary-navigation-link {
-            display: flex;
-            align-items: center;
-            font: inherit;
-            color: inherit;
+    .secondary-navigation-list {
+      .secondary-navigation-item {
+        .secondary-navigation-link {
+          display: flex;
+          align-items: center;
+          font: inherit;
+          color: inherit;
 
-            .icon {
-              height: 1.35em;
-              width: 1.35em;
-            }
+          .icon {
+            height: 1.35em;
+            width: 1.35em;
           }
         }
       }
+    }
 
-      .main-navigation-link {
-        .icon {
-          height: 1.35em;
-          width: 1.35em;
-        }
+    .main-navigation-link {
+      .icon {
+        height: 1.35em;
+        width: 1.35em;
       }
+    }
 
-      .overflow-details {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        position: relative;
-        cursor: pointer;
-        width: fit-content;
+    .overflow-details {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      position: relative;
+      cursor: pointer;
+      width: fit-content;
 
-        transition: all 0.2s ease-in-out;
+      transition: all 0.2s ease-in-out;
 
-        &.visually-hidden {
-          opacity: 0;
-          visibility: hidden;
-          width: 0;
+      &.visually-hidden {
+        opacity: 0;
+        visibility: hidden;
+        width: 0;
+      }
+
+      .overflow-details-summary {
+        --_icon-zoom: 1;
+        --_icon-size: 20px;
+        --_border-width: 1px;
+        --_outline-width: 1px;
+        --_transition-duration: 0.2s;
+
+        display: grid;
+        grid-template-areas: 'icon';
+        align-items: center;
+        justify-content: center;
+        padding-inline: 5px;
+        text-wrap: nowrap;
+
+        aspect-ratio: 1;
+        border-radius: 4px;
+        border: var(--_border-width) solid #ffffff90;
+        outline: var(--_outline-width) solid #ffffff10;
+        background-color: Canvas;
+
+        width: var(--_icon-size);
+        height: var(--_icon-size);
+        overflow: hidden;
+        transition-property: all;
+        transition-timing-function: linear;
+        transition-duration: var(--_transition-duration);
+
+        &::-webkit-details-marker,
+        &::marker {
+          display: none;
         }
 
-        .overflow-details-summary {
-          --_icon-zoom: 1;
-          --_icon-size: 20px;
-          --_border-width: 1px;
-          --_outline-width: 1px;
-          --_transition-duration: 0.2s;
+        &:hover,
+        &:focus-visible {
+          --_icon-zoom: 1.2;
+          outline: var(--_outline-width) solid #ffffff;
+        }
 
-          display: grid;
-          grid-template-areas: 'icon';
-          align-items: center;
-          justify-content: center;
-          padding-inline: 5px;
-          text-wrap: nowrap;
-
-          aspect-ratio: 1;
-          border-radius: 4px;
-          border: var(--_border-width) solid #ffffff90;
-          outline: var(--_outline-width) solid #ffffff10;
-          background-color: Canvas;
-
-          width: var(--_icon-size);
-          height: var(--_icon-size);
-          overflow: hidden;
-          transition-property: all;
-          transition-timing-function: linear;
-          transition-duration: var(--_transition-duration);
-
-          &::-webkit-details-marker,
-          &::marker {
-            display: none;
-          }
+        .icon {
+          grid-area: icon;
+          scale: var(--_icon-zoom);
+          transition: scale 0.2s ease-in-out;
+          width: calc(var(--_icon-size) - var(--_border-width) * 2 - var(--_outline-width) * 2);
+          height: calc(var(--_icon-size) - var(--_border-width) * 2 - var(--_outline-width) * 2);
 
-          &:hover {
-            --_icon-zoom: 1.2;
-            outline: var(--_outline-width) solid #ffffff;
-          }
+          opacity: 0;
+          transition-property: opacity, transform; /* For reference */
+          transition-timing-function: linear; /* For reference */
+          transition-duration: var(--_transition-duration); /* For reference */
 
-          .icon {
-            grid-area: icon;
-            scale: var(--_icon-zoom);
-            transition: scale 0.2s ease-in-out;
-            width: calc(var(--_icon-size) - var(--_border-width) * 2 - var(--_outline-width) * 2);
-            height: calc(var(--_icon-size) - var(--_border-width) * 2 - var(--_outline-width) * 2);
-
-            opacity: 0;
-            transition-property: opacity, transform; /* For reference */
-            transition-timing-function: linear; /* For reference */
-            transition-duration: var(--_transition-duration); /* For reference */
-
-            &.show {
-              opacity: 1;
-            }
+          &.show {
+            opacity: 1;
           }
         }
+      }
 
+      .overflow-details-nav {
+        position: absolute;
+        top: 135%;
+        right: 0;
+        background-color: #000;
+        border: 1px solid #ffffff90;
+        border-radius: 8px;
+        padding: 12px;
+        margin: 0;
+        z-index: 999;
+        min-width: var(--_overflow-drop-down-width, fit-content);
 
-        .overflow-details-nav {
-          position: absolute;
-          top: 135%;
-          right: 0;
-          background-color: #000;
-          border: 1px solid #ffffff90;
-          border-radius: 8px;
-          padding: 12px;
-          margin: 0;
-          z-index: 999;
-          min-width: var(--_overflow-drop-down-width, fit-content);
-
-          display: grid;
-          grid-auto-flow: row;
-          gap: 8px;
-        }
+        display: grid;
+        grid-auto-flow: row;
+        gap: 8px;
       }
     }
   }
+}
 
-  .debug-grid {
-    display: none;
+.debug-grid {
+  display: none;
 
-    .layout-row-inner > div {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
+  .layout-row-inner > div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
 
-      margin-inline: 12px;
+    margin-inline: 12px;
 
-      > div {
-        outline: 1px solid gray;
-        padding: 12px;
-      }
+    > div {
+      outline: 1px solid gray;
+      padding: 12px;
     }
   }
+}
 </style>