luna-one 3.1.538 → 3.1.539

package/dist/luna/components/Tabs/Tabs.scss

@@ -1,829 +1,829 @@
-@import "../../../global-styles/terra.scss";
-
-.tabs-container {
-  width: 100%;
-  display: flex;
-  font-family: $normal-font-family;
-
-  &.text-entries {
-    @media screen and (max-width: $breakpoint-sm) {
-      flex-wrap: wrap;
-    }
-  }
-
-  &.top {
-    flex-direction: column;
-  }
-
-  &.bottom {
-    flex-direction: column-reverse;
-    @media screen and (max-width: $breakpoint-sm) {
-      flex-direction: column;
-    }
-  }
-
-  &.left,
-  &.right {
-    @media screen and (min-width: $breakpoint-sm) {
-      .nav-entries {
-        max-width: 260px;
-        flex-direction: column;
-      }
-    }
-
-    @media screen and (max-width: $breakpoint-sm) {
-      flex-wrap: wrap;
-
-      .nav-entries {
-        width: 100%;
-      }
-    }
-  }
-
-  &.left {
-    flex-direction: row;
-  }
-
-  &.right {
-    flex-direction: row-reverse;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      flex-direction: row;
-    }
-  }
-
-  &__mobile-title {
-    @media screen and (max-width: $breakpoint-sm) {
-      width: 100%;
-    }
-  }
-
-  .nav-entries {
-    width: 100%;
-    display: flex;
-
-    .nav-entry {
-      cursor: pointer;
-      outline: 0;
-
-      &.focus:focus {
-        outline: 2px solid $trimble-blue;
-      }
-    }
-
-    &.text-entries {
-      &.light {
-        border-color: $concrete-gray;
-
-        &.left,
-        &.right {
-          .nav-entry {
-
-            text-align: left;
-            padding: 10px 10px;
-          }
-        }
-
-        .nav-entry {
-          position: relative;
-          border-color: $concrete-gray;
-
-          &.active {
-            border-color: $dark-navy;
-
-            &:before {
-              position: absolute;
-              display: block;
-              content: "";
-              width: 0;
-              height: 0;
-            }
-            .nav-text {
-
-              font-weight: 700 !important;
-              color: $dark-navy;
-              @media screen and (max-width: $breakpoint-sm) {
-                color: $white;
-              }
-            }
-          }
-
-          .nav-text {
-            font-weight: 700 !important;
-            color: $trimble-blue;
-            pointer-events: none;
-            .nav-title {
-              font-weight: 700;
-              text-transform: uppercase;
-            }
-
-            .nav-subtitle {
-              font-weight: 400 !important;
-              display: none;
-            }
-          }
-        }
-      }
-
-      &.dark {
-        border-color: $concrete-gray;
-
-        .nav-entry {
-          position: relative;
-          border-color: $concrete-gray;
-          color: $dark-navy;
-          background-color: $concrete-gray;
-
-          &.active {
-            border-color: $dark-navy;
-            color: $white;
-            background-color: $dark-navy;
-
-            &:before {
-              position: absolute;
-              display: block;
-              content: "";
-              width: 0;
-              height: 0;
-            }
-          }
-        }
-
-        &.top,
-        &.bottom {
-          gap: 2px;
-
-          .nav-entry {
-            width: calc(25% - 2px);
-          }
-        }
-
-        &.left,
-        &.right {
-          border: 0;
-          .nav-entry {
-            text-align: left;
-            margin-bottom: 4px;
-          }
-        }
-      }
-
-      &.top,
-      &.bottom {
-        .nav-entry {
-          &:nth-child(n + 5) {
-            display: none;
-          }
-        }
-      }
-
-      &.top {
-        padding-bottom: 24px;
-
-        .nav-entry {
-          border-bottom-width: 6px;
-          border-bottom-style: solid;
-
-          &.active:before {
-            bottom: -22px;
-            border-left: 20px solid transparent;
-            border-right: 20px solid transparent;
-            border-top: 20px solid $dark-navy;
-          }
-        }
-      }
-
-      &.bottom {
-        padding-top: 24px;
-
-        .nav-entry {
-          border-top-width: 6px;
-          border-top-style: solid;
-
-          &.active:before {
-            top: -22px;
-            border-left: 20px solid transparent;
-            border-right: 20px solid transparent;
-            border-bottom: 20px solid $dark-navy;
-          }
-        }
-      }
-
-      &.left {
-        margin-right: 30px;
-        border-right-width: 6px;
-        border-right-style: solid;
-
-        .nav-entry {
-          width: 260px;
-          border-right-width: 6px;
-          border-right-style: solid;
-          justify-content: flex-start;
-
-          &.active:before {
-            right: -22px;
-            border-top: 20px solid transparent;
-            border-bottom: 20px solid transparent;
-            border-left: 20px solid $dark-navy;
-          }
-        }
-      }
-
-      &.right {
-        margin-left: 34px;
-        border-left-width: 6px;
-        border-left-style: solid;
-
-        .nav-entry {
-          width: 260px;
-          border-left-width: 6px;
-          transform: translateX(-6px);
-          border-left-style: solid;
-          justify-content: flex-start;
-
-          &.active:before {
-            left: -22px;
-            border-top: 20px solid transparent;
-            border-bottom: 20px solid transparent;
-            border-right: 20px solid $dark-navy;
-          }
-        }
-      }
-
-      .nav-entry {
-        width: 25%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 20px 30px;
-
-        .nav-thumbnail {
-          min-width: 70px;
-          width: 70px;
-          height: 70px;
-          margin-right: 16px;
-          border-radius: 100%;
-          overflow: hidden;
-
-          img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-          }
-        }
-
-        .nav-text {
-          font-weight: 700 !important;
-          .nav-title {
-            font-weight: 700 !important;
-            margin: 0;
-            font-size: 16px;
-            line-height: 20px;
-            font-family: $bold-font-family;
-
-            @media screen and (max-width: $breakpoint-sm) {
-              text-align: left;
-            }
-          }
-
-          .nav-subtitle {
-            font-weight: 400 !important;
-            margin: 6px 0 0 0;
-            font-size: 14px;
-            line-height: 19px;
-
-            @media screen and (max-width: $breakpoint-sm) {
-              text-align: left;
-            }
-          }
-        }
-
-        @media screen and (max-width: $breakpoint-sm) {
-          &.active {
-            padding-left: 45px;
-
-            .nav-text {
-              font-weight: 700 !important;
-              .nav-title {
-                font-weight: 700 !important;
-                position: relative;
-
-                &:before {
-                  position: absolute;
-                  display: block;
-                  content: "";
-                  width: 0;
-                  height: 0;
-                  top: calc(50% - 10px);
-                  left: -23px;
-                  border-top: 10px solid transparent;
-                  border-bottom: 10px solid transparent;
-                  border-left: 10px solid $trimble-gold;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        width: 100% !important;
-        max-width: unset;
-        flex-wrap: wrap;
-        padding: 24px 0 0 0;
-        border: 0 !important;
-        margin: 0 !important;
-
-        &.top,
-        &.left,
-        &.right,
-        &.bottom {
-          order: 2;
-        }
-
-        .nav-entry {
-          width: 100% !important;
-          border: 0 !important;
-          padding: 15px 20px;
-          background-color: $concrete-gray;
-          justify-content: flex-start !important;
-          transform: translateX(0) !important;
-
-          &.active {
-            background-color: $dark-navy;
-
-            .nav-text {
-              font-weight: 700 !important;
-              color: $white;
-            }
-          }
-
-          &:not(:last-child) {
-            margin-bottom: 10px !important;
-          }
-
-          &:last-child {
-            margin-bottom: 0 !important;
-          }
-
-          &:before {
-            display: none !important;
-          }
-
-          .nav-thumbnail {
-            display: none;
-          }
-
-          .nav-text {
-            font-weight: 700 !important;
-            .nav-title {
-              font-weight: 700 !important;
-              text-transform: unset !important;
-            }
-          }
-        }
-      }
-    }
-
-    &.thumbnails {
-      &.top,
-      &.bottom {
-        .nav-entry {
-          width: 25%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-
-      &.left,
-      &.right {
-        width: auto;
-      }
-
-      &.left,
-      &.right,
-      &.bottom {
-        @media screen and (max-width: $breakpoint-sm) {
-          padding-bottom: 24px;
-
-          .nav-entry {
-            width: 25%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-
-          .nav-entry.active .nav-thumbnail:before {
-            bottom: -12px;
-            left: calc(50% - 10px);
-            border-left: 10px solid transparent;
-            border-right: 10px solid transparent;
-            border-top: 10px solid $trimble-blue;
-          }
-        }
-      }
-
-      &.top {
-        padding-bottom: 24px;
-
-        .nav-entry.active .nav-thumbnail:before {
-          bottom: -22px;
-          left: calc(50% - 20px);
-          border-left: 20px solid transparent;
-          border-right: 20px solid transparent;
-          border-top: 20px solid $trimble-blue;
-
-          @media screen and (max-width: $breakpoint-sm) {
-            bottom: -12px;
-            left: calc(50% - 10px);
-            border-left: 10px solid transparent;
-            border-right: 10px solid transparent;
-            border-top: 10px solid $trimble-blue;
-          }
-        }
-      }
-
-      &.bottom {
-        @media screen and (min-width: $breakpoint-sm) {
-          padding-top: 24px;
-
-          .nav-entry.active .nav-thumbnail:before {
-            top: -22px;
-            left: calc(50% - 20px);
-            border-left: 20px solid transparent;
-            border-right: 20px solid transparent;
-            border-bottom: 20px solid $trimble-blue;
-          }
-        }
-
-        @media screen and (max-width: $breakpoint-sm) {
-          padding-bottom: 24px;
-          order: 2;
-        }
-      }
-
-      &.left {
-        @media screen and (min-width: $breakpoint-sm) {
-          padding-right: 30px;
-
-          .nav-entry.active .nav-thumbnail:before {
-            right: -22px;
-            top: calc(50% - 20px);
-            border-top: 20px solid transparent;
-            border-bottom: 20px solid transparent;
-            border-left: 20px solid $trimble-blue;
-          }
-        }
-      }
-
-      &.right {
-        @media screen and (min-width: $breakpoint-sm) {
-          padding-left: 34px;
-
-          .nav-entry.active .nav-thumbnail:before {
-            left: -22px;
-            top: calc(50% - 20px);
-            border-top: 20px solid transparent;
-            border-bottom: 20px solid transparent;
-            border-right: 20px solid $trimble-blue;
-          }
-        }
-      }
-
-      &.round {
-        &.top,
-        &.bottom {
-          .nav-entry {
-            &:nth-child(n + 5) {
-              display: none;
-            }
-          }
-        }
-
-        &.left,
-        &.right {
-          .nav-entry {
-            &:nth-child(n + 5) {
-              display: none;
-            }
-          }
-
-          @media screen and (min-width: $breakpoint-sm) {
-            .nav-entry {
-              &:not(:last-child) {
-                margin-bottom: 30px;
-              }
-            }
-          }
-        }
-
-        .nav-entry {
-          padding: 0 30px;
-
-          @media screen and (max-width: $breakpoint-sm) {
-            padding: 0 10px;
-          }
-
-          &.active {
-            .nav-thumbnail {
-              opacity: 1;
-              border: 5px solid $trimble-blue;
-            }
-          }
-
-          .nav-thumbnail {
-            display: flex;
-            align-items: center;
-            position: relative;
-            width: 200px;
-            max-width: 200px;
-            height: 200px;
-            max-height: 200px;
-            padding: 10px;
-            border-radius: 100%;
-            opacity: 0.5;
-
-            @media screen and (max-width: $breakpoint-sm) {
-              padding: 5px;
-              width: 112px;
-              height: 112px;
-            }
-
-            @media screen and (max-width: $breakpoint-xs) {
-              max-width: 75px;
-              max-height: 75px;
-              min-width: 75px;
-            }
-
-            @media screen and (max-width: $breakpoint-xxs) {
-              padding: 2px;
-              max-width: 45px;
-              max-height: 45px;
-              min-width: 45px;
-            }
-
-            &:before {
-              position: absolute;
-              display: block;
-              content: "";
-              width: 0;
-              height: 0;
-            }
-
-            img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              border-radius: 50%;
-              object-position: center;
-            }
-          }
-        }
-      }
-
-      &.square {
-        &.top,
-        &.bottom {
-          justify-content: center;
-
-          .nav-entry {
-            &:not(:last-child) {
-              margin-right: 20px;
-            }
-
-            &:nth-child(n + 5) {
-              display: none;
-            }
-          }
-        }
-
-        &.left,
-        &.right {
-          @media screen and (min-width: $breakpoint-sm) {
-            align-items: center;
-
-            .nav-entry {
-              &:not(:last-child) {
-                margin-bottom: 20px;
-              }
-            }
-          }
-          @media screen and (max-width: $breakpoint-sm) {
-            width: 100%;
-            justify-content: center;
-
-            .nav-entry {
-              &:not(:last-child) {
-                margin-right: 20px;
-              }
-            }
-          }
-
-          @media screen and (max-width: $breakpoint-xs) {
-            .nav-entry {
-              &:not(:last-child) {
-                margin-right: 10px;
-              }
-            }
-          }
-
-          .nav-entry {
-            &:nth-child(n + 5) {
-              display: none;
-            }
-          }
-        }
-
-        &.left {
-          @media screen and (min-width: $breakpoint-sm) {
-            display: flex;
-            align-items: flex-end;
-          }
-        }
-
-        &.right {
-          @media screen and (min-width: $breakpoint-sm) {
-            display: flex;
-            align-items: flex-start;
-          }
-        }
-
-        .nav-entry {
-          width: 126px;
-          max-width: 126px;
-          height: 126px;
-          max-height: 126px;
-
-          &.active {
-            .nav-thumbnail {
-              border: 5px solid $trimble-blue;
-              opacity: 1;
-            }
-          }
-
-          @media screen and (max-width: $breakpoint-sm) {
-            padding: 5px;
-            width: 112px;
-            height: 112px;
-          }
-
-          @media screen and (max-width: $breakpoint-xs) {
-            max-width: 75px;
-            max-height: 75px;
-            min-width: 75px;
-          }
-
-          @media screen and (max-width: $breakpoint-xxs) {
-            padding: 2px;
-            max-width: 45px;
-            max-height: 45px;
-            min-width: 45px;
-          }
-
-          .nav-thumbnail {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            padding: 5px;
-            opacity: 0.5;
-
-            &:before {
-              position: absolute;
-              display: block;
-              content: "";
-              width: 0;
-              height: 0;
-            }
-
-            img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
-          }
-        }
-      }
-
-      .nav-entry {
-        .nav-text {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .content-entries.top,
-  .content-entries.bottom {
-    .ter-block-list-items {
-      margin: 5px auto;
-    }
-
-    .ter-bounded-cards {
-      margin: 0 auto;
-      max-width: 1110px !important;
-      display: flex;
-      flex-wrap: wrap;
-
-      @media screen and (max-width: $breakpoint-md) {
-        max-width: 1000px !important;
-      }
-
-      @media screen and (max-width: 1200px) {
-        max-width: 900px !important;
-        grid-gap: 20px;
-      }
-
-      @media screen and (max-width: 1100px) {
-        max-width: 800px !important;
-        grid-gap: 20px;
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        margin: 5px;
-      }
-    }
-  }
-
-  .content-entries {
-    width: 100%;
-    max-width: 100%;
-
-    .ter-block-list-items {
-      margin: 5px auto;
-    }
-
-    .ter-bounded-cards {
-      margin: 0 auto;
-      max-width: 822px !important;
-      display: flex;
-      flex-wrap: wrap;
-      @media screen and (max-width: $breakpoint-md) {
-        max-width: 720px !important;
-      }
-
-      @media screen and (max-width: 1200px) {
-        max-width: 650px !important;
-        grid-gap: 20px;
-      }
-
-      @media screen and (max-width: 1100px) {
-        max-width: 550px !important;
-        grid-gap: 36px;
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        margin: 5px;
-      }
-    }
-
-    .ter-bounded-card {
-      flex: 1 1 0;
-      max-width: 250px;
-      min-width: 250px;
-
-      @media screen and (max-width: $breakpoint-md) {
-        min-width: 200px;
-        max-width: 250px;
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        min-width: auto;
-        max-width: 100%;
-      }
-    }
-
-    .content-entry {
-      width: 100%;
-      display: none;
-
-      &.active {
-        display: block;
-      }
-    }
-    .nested-content .default-layout .default-layout__children {
-      grid-column: 1 / span 16 !important;
-      padding: 0 2px 0 2px;
-    }
-  }
-}
-
-.nav-text-top-mobile {
-  padding-bottom: 16px;
-  border-bottom: 3px solid $dark-navy;
-
-  &__arrow {
-    margin: 0 30px 16px;
-    width: 10px;
-    border-left: 10px solid transparent !important;
-    border-right: 10px solid transparent !important;
-    border-top: 10px solid $dark-navy !important;
-  }
-
-  .nav-title {
-    margin: 0 24px;
-    font-size: 16px;
-    line-height: 24px;
-    font-family: $bold-font-family;
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.tabs-container {
+  width: 100%;
+  display: flex;
+  font-family: $normal-font-family;
+
+  &.text-entries {
+    @media screen and (max-width: $breakpoint-sm) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &.top {
+    flex-direction: column;
+  }
+
+  &.bottom {
+    flex-direction: column-reverse;
+    @media screen and (max-width: $breakpoint-sm) {
+      flex-direction: column;
+    }
+  }
+
+  &.left,
+  &.right {
+    @media screen and (min-width: $breakpoint-sm) {
+      .nav-entries {
+        max-width: 260px;
+        flex-direction: column;
+      }
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+      flex-wrap: wrap;
+
+      .nav-entries {
+        width: 100%;
+      }
+    }
+  }
+
+  &.left {
+    flex-direction: row;
+  }
+
+  &.right {
+    flex-direction: row-reverse;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      flex-direction: row;
+    }
+  }
+
+  &__mobile-title {
+    @media screen and (max-width: $breakpoint-sm) {
+      width: 100%;
+    }
+  }
+
+  .nav-entries {
+    width: 100%;
+    display: flex;
+
+    .nav-entry {
+      cursor: pointer;
+      outline: 0;
+
+      &.focus:focus {
+        outline: 2px solid $trimble-blue;
+      }
+    }
+
+    &.text-entries {
+      &.light {
+        border-color: $concrete-gray;
+
+        &.left,
+        &.right {
+          .nav-entry {
+
+            text-align: left;
+            padding: 10px 10px;
+          }
+        }
+
+        .nav-entry {
+          position: relative;
+          border-color: $concrete-gray;
+
+          &.active {
+            border-color: $dark-navy;
+
+            &:before {
+              position: absolute;
+              display: block;
+              content: "";
+              width: 0;
+              height: 0;
+            }
+            .nav-text {
+
+              font-weight: 700 !important;
+              color: $dark-navy;
+              @media screen and (max-width: $breakpoint-sm) {
+                color: $white;
+              }
+            }
+          }
+
+          .nav-text {
+            font-weight: 700 !important;
+            color: $trimble-blue;
+            pointer-events: none;
+            .nav-title {
+              font-weight: 700;
+              text-transform: uppercase;
+            }
+
+            .nav-subtitle {
+              font-weight: 400 !important;
+              display: none;
+            }
+          }
+        }
+      }
+
+      &.dark {
+        border-color: $concrete-gray;
+
+        .nav-entry {
+          position: relative;
+          border-color: $concrete-gray;
+          color: $dark-navy;
+          background-color: $concrete-gray;
+
+          &.active {
+            border-color: $dark-navy;
+            color: $white;
+            background-color: $dark-navy;
+
+            &:before {
+              position: absolute;
+              display: block;
+              content: "";
+              width: 0;
+              height: 0;
+            }
+          }
+        }
+
+        &.top,
+        &.bottom {
+          gap: 2px;
+
+          .nav-entry {
+            width: calc(25% - 2px);
+          }
+        }
+
+        &.left,
+        &.right {
+          border: 0;
+          .nav-entry {
+            text-align: left;
+            margin-bottom: 4px;
+          }
+        }
+      }
+
+      &.top,
+      &.bottom {
+        .nav-entry {
+          &:nth-child(n + 5) {
+            display: none;
+          }
+        }
+      }
+
+      &.top {
+        padding-bottom: 24px;
+
+        .nav-entry {
+          border-bottom-width: 6px;
+          border-bottom-style: solid;
+
+          &.active:before {
+            bottom: -22px;
+            border-left: 20px solid transparent;
+            border-right: 20px solid transparent;
+            border-top: 20px solid $dark-navy;
+          }
+        }
+      }
+
+      &.bottom {
+        padding-top: 24px;
+
+        .nav-entry {
+          border-top-width: 6px;
+          border-top-style: solid;
+
+          &.active:before {
+            top: -22px;
+            border-left: 20px solid transparent;
+            border-right: 20px solid transparent;
+            border-bottom: 20px solid $dark-navy;
+          }
+        }
+      }
+
+      &.left {
+        margin-right: 30px;
+        border-right-width: 6px;
+        border-right-style: solid;
+
+        .nav-entry {
+          width: 260px;
+          border-right-width: 6px;
+          border-right-style: solid;
+          justify-content: flex-start;
+
+          &.active:before {
+            right: -22px;
+            border-top: 20px solid transparent;
+            border-bottom: 20px solid transparent;
+            border-left: 20px solid $dark-navy;
+          }
+        }
+      }
+
+      &.right {
+        margin-left: 34px;
+        border-left-width: 6px;
+        border-left-style: solid;
+
+        .nav-entry {
+          width: 260px;
+          border-left-width: 6px;
+          transform: translateX(-6px);
+          border-left-style: solid;
+          justify-content: flex-start;
+
+          &.active:before {
+            left: -22px;
+            border-top: 20px solid transparent;
+            border-bottom: 20px solid transparent;
+            border-right: 20px solid $dark-navy;
+          }
+        }
+      }
+
+      .nav-entry {
+        width: 25%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 20px 30px;
+
+        .nav-thumbnail {
+          min-width: 70px;
+          width: 70px;
+          height: 70px;
+          margin-right: 16px;
+          border-radius: 100%;
+          overflow: hidden;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+
+        .nav-text {
+          font-weight: 700 !important;
+          .nav-title {
+            font-weight: 700 !important;
+            margin: 0;
+            font-size: 16px;
+            line-height: 20px;
+            font-family: $bold-font-family;
+
+            @media screen and (max-width: $breakpoint-sm) {
+              text-align: left;
+            }
+          }
+
+          .nav-subtitle {
+            font-weight: 400 !important;
+            margin: 6px 0 0 0;
+            font-size: 14px;
+            line-height: 19px;
+
+            @media screen and (max-width: $breakpoint-sm) {
+              text-align: left;
+            }
+          }
+        }
+
+        @media screen and (max-width: $breakpoint-sm) {
+          &.active {
+            padding-left: 45px;
+
+            .nav-text {
+              font-weight: 700 !important;
+              .nav-title {
+                font-weight: 700 !important;
+                position: relative;
+
+                &:before {
+                  position: absolute;
+                  display: block;
+                  content: "";
+                  width: 0;
+                  height: 0;
+                  top: calc(50% - 10px);
+                  left: -23px;
+                  border-top: 10px solid transparent;
+                  border-bottom: 10px solid transparent;
+                  border-left: 10px solid $trimble-gold;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        width: 100% !important;
+        max-width: unset;
+        flex-wrap: wrap;
+        padding: 24px 0 0 0;
+        border: 0 !important;
+        margin: 0 !important;
+
+        &.top,
+        &.left,
+        &.right,
+        &.bottom {
+          order: 2;
+        }
+
+        .nav-entry {
+          width: 100% !important;
+          border: 0 !important;
+          padding: 15px 20px;
+          background-color: $concrete-gray;
+          justify-content: flex-start !important;
+          transform: translateX(0) !important;
+
+          &.active {
+            background-color: $dark-navy;
+
+            .nav-text {
+              font-weight: 700 !important;
+              color: $white;
+            }
+          }
+
+          &:not(:last-child) {
+            margin-bottom: 10px !important;
+          }
+
+          &:last-child {
+            margin-bottom: 0 !important;
+          }
+
+          &:before {
+            display: none !important;
+          }
+
+          .nav-thumbnail {
+            display: none;
+          }
+
+          .nav-text {
+            font-weight: 700 !important;
+            .nav-title {
+              font-weight: 700 !important;
+              text-transform: unset !important;
+            }
+          }
+        }
+      }
+    }
+
+    &.thumbnails {
+      &.top,
+      &.bottom {
+        .nav-entry {
+          width: 25%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
+      &.left,
+      &.right {
+        width: auto;
+      }
+
+      &.left,
+      &.right,
+      &.bottom {
+        @media screen and (max-width: $breakpoint-sm) {
+          padding-bottom: 24px;
+
+          .nav-entry {
+            width: 25%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .nav-entry.active .nav-thumbnail:before {
+            bottom: -12px;
+            left: calc(50% - 10px);
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 10px solid $trimble-blue;
+          }
+        }
+      }
+
+      &.top {
+        padding-bottom: 24px;
+
+        .nav-entry.active .nav-thumbnail:before {
+          bottom: -22px;
+          left: calc(50% - 20px);
+          border-left: 20px solid transparent;
+          border-right: 20px solid transparent;
+          border-top: 20px solid $trimble-blue;
+
+          @media screen and (max-width: $breakpoint-sm) {
+            bottom: -12px;
+            left: calc(50% - 10px);
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 10px solid $trimble-blue;
+          }
+        }
+      }
+
+      &.bottom {
+        @media screen and (min-width: $breakpoint-sm) {
+          padding-top: 24px;
+
+          .nav-entry.active .nav-thumbnail:before {
+            top: -22px;
+            left: calc(50% - 20px);
+            border-left: 20px solid transparent;
+            border-right: 20px solid transparent;
+            border-bottom: 20px solid $trimble-blue;
+          }
+        }
+
+        @media screen and (max-width: $breakpoint-sm) {
+          padding-bottom: 24px;
+          order: 2;
+        }
+      }
+
+      &.left {
+        @media screen and (min-width: $breakpoint-sm) {
+          padding-right: 30px;
+
+          .nav-entry.active .nav-thumbnail:before {
+            right: -22px;
+            top: calc(50% - 20px);
+            border-top: 20px solid transparent;
+            border-bottom: 20px solid transparent;
+            border-left: 20px solid $trimble-blue;
+          }
+        }
+      }
+
+      &.right {
+        @media screen and (min-width: $breakpoint-sm) {
+          padding-left: 34px;
+
+          .nav-entry.active .nav-thumbnail:before {
+            left: -22px;
+            top: calc(50% - 20px);
+            border-top: 20px solid transparent;
+            border-bottom: 20px solid transparent;
+            border-right: 20px solid $trimble-blue;
+          }
+        }
+      }
+
+      &.round {
+        &.top,
+        &.bottom {
+          .nav-entry {
+            &:nth-child(n + 5) {
+              display: none;
+            }
+          }
+        }
+
+        &.left,
+        &.right {
+          .nav-entry {
+            &:nth-child(n + 5) {
+              display: none;
+            }
+          }
+
+          @media screen and (min-width: $breakpoint-sm) {
+            .nav-entry {
+              &:not(:last-child) {
+                margin-bottom: 30px;
+              }
+            }
+          }
+        }
+
+        .nav-entry {
+          padding: 0 30px;
+
+          @media screen and (max-width: $breakpoint-sm) {
+            padding: 0 10px;
+          }
+
+          &.active {
+            .nav-thumbnail {
+              opacity: 1;
+              border: 5px solid $trimble-blue;
+            }
+          }
+
+          .nav-thumbnail {
+            display: flex;
+            align-items: center;
+            position: relative;
+            width: 200px;
+            max-width: 200px;
+            height: 200px;
+            max-height: 200px;
+            padding: 10px;
+            border-radius: 100%;
+            opacity: 0.5;
+
+            @media screen and (max-width: $breakpoint-sm) {
+              padding: 5px;
+              width: 112px;
+              height: 112px;
+            }
+
+            @media screen and (max-width: $breakpoint-xs) {
+              max-width: 75px;
+              max-height: 75px;
+              min-width: 75px;
+            }
+
+            @media screen and (max-width: $breakpoint-xxs) {
+              padding: 2px;
+              max-width: 45px;
+              max-height: 45px;
+              min-width: 45px;
+            }
+
+            &:before {
+              position: absolute;
+              display: block;
+              content: "";
+              width: 0;
+              height: 0;
+            }
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              border-radius: 50%;
+              object-position: center;
+            }
+          }
+        }
+      }
+
+      &.square {
+        &.top,
+        &.bottom {
+          justify-content: center;
+
+          .nav-entry {
+            &:not(:last-child) {
+              margin-right: 20px;
+            }
+
+            &:nth-child(n + 5) {
+              display: none;
+            }
+          }
+        }
+
+        &.left,
+        &.right {
+          @media screen and (min-width: $breakpoint-sm) {
+            align-items: center;
+
+            .nav-entry {
+              &:not(:last-child) {
+                margin-bottom: 20px;
+              }
+            }
+          }
+          @media screen and (max-width: $breakpoint-sm) {
+            width: 100%;
+            justify-content: center;
+
+            .nav-entry {
+              &:not(:last-child) {
+                margin-right: 20px;
+              }
+            }
+          }
+
+          @media screen and (max-width: $breakpoint-xs) {
+            .nav-entry {
+              &:not(:last-child) {
+                margin-right: 10px;
+              }
+            }
+          }
+
+          .nav-entry {
+            &:nth-child(n + 5) {
+              display: none;
+            }
+          }
+        }
+
+        &.left {
+          @media screen and (min-width: $breakpoint-sm) {
+            display: flex;
+            align-items: flex-end;
+          }
+        }
+
+        &.right {
+          @media screen and (min-width: $breakpoint-sm) {
+            display: flex;
+            align-items: flex-start;
+          }
+        }
+
+        .nav-entry {
+          width: 126px;
+          max-width: 126px;
+          height: 126px;
+          max-height: 126px;
+
+          &.active {
+            .nav-thumbnail {
+              border: 5px solid $trimble-blue;
+              opacity: 1;
+            }
+          }
+
+          @media screen and (max-width: $breakpoint-sm) {
+            padding: 5px;
+            width: 112px;
+            height: 112px;
+          }
+
+          @media screen and (max-width: $breakpoint-xs) {
+            max-width: 75px;
+            max-height: 75px;
+            min-width: 75px;
+          }
+
+          @media screen and (max-width: $breakpoint-xxs) {
+            padding: 2px;
+            max-width: 45px;
+            max-height: 45px;
+            min-width: 45px;
+          }
+
+          .nav-thumbnail {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            padding: 5px;
+            opacity: 0.5;
+
+            &:before {
+              position: absolute;
+              display: block;
+              content: "";
+              width: 0;
+              height: 0;
+            }
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+
+      .nav-entry {
+        .nav-text {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .content-entries.top,
+  .content-entries.bottom {
+    .ter-block-list-items {
+      margin: 5px auto;
+    }
+
+    .ter-bounded-cards {
+      margin: 0 auto;
+      max-width: 1110px !important;
+      display: flex;
+      flex-wrap: wrap;
+
+      @media screen and (max-width: $breakpoint-md) {
+        max-width: 1000px !important;
+      }
+
+      @media screen and (max-width: 1200px) {
+        max-width: 900px !important;
+        grid-gap: 20px;
+      }
+
+      @media screen and (max-width: 1100px) {
+        max-width: 800px !important;
+        grid-gap: 20px;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        margin: 5px;
+      }
+    }
+  }
+
+  .content-entries {
+    width: 100%;
+    max-width: 100%;
+
+    .ter-block-list-items {
+      margin: 5px auto;
+    }
+
+    .ter-bounded-cards {
+      margin: 0 auto;
+      max-width: 822px !important;
+      display: flex;
+      flex-wrap: wrap;
+      @media screen and (max-width: $breakpoint-md) {
+        max-width: 720px !important;
+      }
+
+      @media screen and (max-width: 1200px) {
+        max-width: 650px !important;
+        grid-gap: 20px;
+      }
+
+      @media screen and (max-width: 1100px) {
+        max-width: 550px !important;
+        grid-gap: 36px;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        margin: 5px;
+      }
+    }
+
+    .ter-bounded-card {
+      flex: 1 1 0;
+      max-width: 250px;
+      min-width: 250px;
+
+      @media screen and (max-width: $breakpoint-md) {
+        min-width: 200px;
+        max-width: 250px;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        min-width: auto;
+        max-width: 100%;
+      }
+    }
+
+    .content-entry {
+      width: 100%;
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+    .nested-content .default-layout .default-layout__children {
+      grid-column: 1 / span 16 !important;
+      padding: 0 2px 0 2px;
+    }
+  }
+}
+
+.nav-text-top-mobile {
+  padding-bottom: 16px;
+  border-bottom: 3px solid $dark-navy;
+
+  &__arrow {
+    margin: 0 30px 16px;
+    width: 10px;
+    border-left: 10px solid transparent !important;
+    border-right: 10px solid transparent !important;
+    border-top: 10px solid $dark-navy !important;
+  }
+
+  .nav-title {
+    margin: 0 24px;
+    font-size: 16px;
+    line-height: 24px;
+    font-family: $bold-font-family;
+  }
+}