diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
index 8a8032ee16..c26c89a478 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
@@ -1,199 +1,195 @@
 .umb-sub-views-nav-item {
     position: relative;
     display: block;
-}
 
-.umb-sub-views-nav-item__action,
-.umb-sub-views-nav-item > a {
-  background: transparent;
-  text-align: center;
-  cursor: pointer;
-  display: block;
-  padding: 4px 10px 0 10px;
-  min-width: 70px;
-  border: 0 none;
-  border-right: 1px solid @gray-9;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: calc(~'@{editorHeaderHeight}' - ~'1px'); // need to offset the 1px border-bottom on .umb-editor-header - avoids overflowing top of the container
-  position: relative;
-  
-  color: @ui-active-type;
-  
-  &:focus,
-  &:hover {
-      color: @ui-active-type-hover !important;
-  }
-  
-  &::after {
-      content: "";
-      height: 0px;
-      left: 8px;
-      right: 8px;
-      background-color: @ui-light-active-border;
-      position: absolute;
-      bottom: 0;
-      border-radius: 3px 3px 0 0;
-      opacity: 0;
-      transition: all .2s linear;
-  }
-}
+    &__action,
+    > a {
+        background: transparent;
+        text-align: center;
+        cursor: pointer;
+        display: block;
+        padding: 4px 10px 0 10px;
+        min-width: 70px;
+        border: 0 none;
+        border-right: 1px solid @gray-9;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: calc(~'@{editorHeaderHeight}'- ~'1px'); // need to offset the 1px border-bottom on .umb-editor-header - avoids overflowing top of the container
+        position: relative;
+        color: @ui-active-type;
 
-.umb-sub-views-nav-item__action:focus,
-.umb-sub-views-nav-item__action:active,
-.umb-sub-views-nav-item > a:active {
-  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
-}
-.umb-sub-views-nav-item__action:focus,
-.umb-sub-views-nav-item > a:focus {
-  outline: none;
-}
+        &:focus,
+        &:hover {
+            color: @ui-active-type-hover  !important;
+            text-decoration: none;
+        }
 
-.umb-sub-views-nav-item__action:hover,
-.umb-sub-views-nav-item__action:focus,
-.umb-sub-views-nav-item > a:hover,
-.umb-sub-views-nav-item > a:focus {
-  text-decoration: none;
-}
-.umb-sub-views-nav-item__action.is-active,
-.umb-sub-views-nav-item > a.is-active {
-    
-    color: @ui-light-active-type;
-    
-    &::after {
+        &:focus {
+            outline: none;
+        }
+
+        &::after {
+            content: "";
+            height: 0px;
+            left: 8px;
+            right: 8px;
+            background-color: @ui-light-active-border;
+            position: absolute;
+            bottom: 0;
+            border-radius: 3px 3px 0 0;
+            opacity: 0;
+            transition: all .2s linear;
+        }
+
+        &.is-active {
+            color: @ui-light-active-type;
+
+            &::after {
+                opacity: 1;
+                height: 4px;
+            }
+        }
+    }
+
+    &__action:focus,
+    &__action:active,
+    & > a:active {
+        .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+    }
+
+    &:focus-within &__anchor_dropdown,
+    &:hover &__anchor_dropdown {
+        visibility: visible;
         opacity: 1;
-        height: 4px;
+        transition: opacity 20ms 0;
+    }
+
+    .icon {
+        font-size: 24px;
+        display: block;
+        text-align: center;
+        margin-bottom: 7px;
+    }
+
+    .badge {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        min-width: 16px;
+        color: @white;
+        background-color: @ui-active-type;
+        border: 2px solid @white;
+        border-radius: 50%;
+        font-size: 10px;
+        font-weight: bold;
+        padding: 2px;
+        line-height: 16px;
+        display: block;
+
+        &.-type-alert {
+            background-color: @red;
+        }
+
+        &.-type-warning {
+            background-color: @yellow-d2;
+        }
+
+        &:empty {
+            height: 12px;
+            min-width: 12px;
+        }
+    }
+
+    &-text {
+        font-size: 12px;
+        line-height: 1em;
+    }
+
+    &__anchor_dropdown {
+        // inherits from .dropdown-menu
+        margin: 0;
+        overflow: hidden;
+
+        // center align horizontal
+        left: 50%;
+        transform: translateX(-50%);
+        opacity: 0;
+        transition: opacity 250ms 250ms;
+        visibility: hidden;
+
+        li {
+            &.is-active a {
+                border-left-color: @ui-selected-border;
+            }
+            
+            a {
+                border-left: 4px solid transparent;
+            }
+        }
+    }
+
+    // Currently Edge 18 does unfortunately not support :focus-within so for now we will use the "old" behavior - Support is coming with the upcoming release of Edge 76
+    // See https://caniuse.com/#search=focus-within
+    @supports (-ms-ime-align:auto) {
+        &:hover &__anchor_dropdown {
+            transition: visibility 0 0, opacity 20ms 0;
+        }
+
+        &__anchor_dropdown {
+            visibility: hidden;
+            transition: visibility 0 500ms, opacity 250ms 250ms;
+        }
+    }
+    
+    // --------------------------------
+    // item__more, appears when there is not enough room for the visible items.
+    // --------------------------------
+
+    &-more__icon {
+        margin-bottom: 10px;
+
+        i {
+            height: 5px;
+            width: 5px;
+            border-radius: 50%;
+            background: @ui-active-type; // fallback if browser doesnt support currentColor
+            background: currentColor;
+            display: inline-block;
+            margin: 0 5px 0 0;
+        }
+
+        i:last-of-type {
+            margin-right: 0;
+        }
+    }
+
+    &-more__dropdown {
+        left: auto;
+        right: 0;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        min-width: auto;
+        margin-top: 10px;
+
+        > li {
+            display: flex;
+        }
+
+        .umb-sub-views-nav-item:first {
+            border-left: none;
+        }
     }
 }
 
+// Validation
 .umb-sub-views-nav-item__action.-has-error,
 .show-validation .umb-sub-views-nav-item > a.-has-error {
-  color: @red;
-  &::after {
-      background-color: @red;
-  }
-}
+    color: @red;
 
-.umb-sub-views-nav-item .icon {
-  font-size: 24px;
-  display: block;
-  text-align: center;
-  margin-bottom: 7px;
-}
-
-.umb-sub-views-nav-item .badge {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  min-width: 16px;
-  color: @white;
-  background-color: @ui-active-type;
-  border: 2px solid @white;
-  border-radius: 50%;
-  font-size: 10px;
-  font-weight: bold;
-  padding: 2px;
-  line-height: 16px;
-  display: block;
-
-  &.-type-alert {
-    background-color: @red;
-  }
-  &.-type-warning {
-    background-color: @yellow-d2;
-  }
-  &:empty {
-    height: 12px;
-    min-width: 12px;
-  }
-}
-
-.umb-sub-views-nav-item-text {
-  font-size: 12px;
-  line-height: 1em;
-}
-
-
-.umb-sub-views-nav-item__anchor_dropdown {// inherits from .dropdown-menu
-    display: block;
-    margin: 0;
-    overflow: hidden;
-    
-    // center align horizontal
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition: opacity 250ms 250ms;
-}
-
-// Currently Edge 18 does unfortunately not support :focus-within so for now we will use the "old" behavior - Support is coming with the upcoming release of Edge 76
-// See https://caniuse.com/#search=focus-within
-@supports (-ms-ime-align:auto) { 
-    .umb-sub-views-nav-item__anchor_dropdown {
-        visibility: hidden;
-        transition: visibility 0 500ms, opacity 250ms 250ms;
+    &::after {
+        background-color: @red;
     }
-}
-
-.umb-sub-views-nav-item__anchor_dropdown li a {
-    border-left: 4px solid transparent;
-}
-.umb-sub-views-nav-item__anchor_dropdown li.is-active a {
-    border-left-color: @ui-selected-border;
-}
-
-.umb-sub-views-nav-item:focus-within .umb-sub-views-nav-item__anchor_dropdown,
-.umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown {
-    visibility:visible;
-    opacity: 1;
-    transition: opacity 20ms 0;
-}
-
-// Currently Edge 18 does unfortunately not support :focus-within so for now we will use the "old" behavior - Support is coming with the upcoming release of Edge 76
-// See https://caniuse.com/#search=focus-within
-@supports (-ms-ime-align:auto) { 
-    .umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown {
-        transition: visibility 0 0, opacity 20ms 0;
-    }
-}
-
-
-// --------------------------------
-// item__more, appears when there is not enough room for the visible items.
-// --------------------------------
-
-.umb-sub-views-nav-item-more__icon {
-  margin-bottom: 10px;
-}
-
-.umb-sub-views-nav-item-more__icon i {
-	height: 5px;
-  width: 5px;
-  border-radius: 50%;
-  background: @ui-active-type;// fallback if browser doesnt support currentColor
-  background: currentColor;
-  display: inline-block;
-  margin: 0 5px 0 0;
-}
-
-.umb-sub-views-nav-item-more__icon i:last-of-type {
-  margin-right: 0;
-}
-
-.umb-sub-views-nav-item-more__dropdown {
-  left: auto;
-  right: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  min-width: auto;
-  margin-top: 10px;
-}
-.umb-sub-views-nav-item-more__dropdown > li {
-    display: flex;
-}
-.umb-sub-views-nav-item-more__dropdown .umb-sub-views-nav-item:first {
-    border-left: none;
-}
+}
\ No newline at end of file