@qite/tide-components 1.0.10 → 1.0.13-preview.0

package/styles/components/_navbar.scss

@@ -1,765 +1,765 @@
-@use '../components/mixins' as mixins;
-
-.nav {
-  &__subnav {
-    background: var(--tide-booking-subnav-background);
-    border: var(--tide-booking-subnav-border);
-    border-radius: var(--tide-booking-subnav-border-radius);
-    box-shadow: var(--tide-booking-subnav-box-shadow);
-    height: 40px;
-    display: none;
-    align-items: center;
-
-    @include mixins.media-md {
-      display: flex;
-    }
-
-    &__container {
-      @include mixins.container-wide();
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      height: 100%;
-    }
-
-    &__links {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      height: 100%;
-    }
-
-    &__link {
-      background: var(--tide-booking-subnav-link-background);
-      border-bottom: var(--tide-booking-subnav-link-border-bottom);
-      text-decoration: var(--tide-booking-subnav-link-text-decoration);
-      color: var(--tide-booking-subnav-link-color);
-      font-weight: var(--tide-booking-subnav-link-font-weight);
-      font-family: var(--tide-booking-subnav-link-font-family);
-      font-size: 12px;
-      padding: 0 8px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 5px;
-      transition: all 0.3s ease-in-out;
-
-      &:hover {
-        background: var(--tide-booking-subnav-link-hover-background);
-        border-bottom: var(--tide-booking-subnav-link-hover-border-bottom);
-        text-decoration: var(--tide-booking-subnav-link-hover-text-decoration);
-        color: var(--tide-booking-subnav-link-hover-color);
-      }
-    }
-
-    &__member {
-      color: var(--tide-booking-subnav-link-color);
-      font-weight: var(--tide-booking-subnav-link-font-weight);
-      font-family: var(--tide-booking-subnav-link-font-family);
-      font-size: 12px;
-      padding: 0 8px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 5px;
-    }
-
-    &__languages {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-      height: 100%;
-
-      &__icon {
-        opacity: 0.85;
-      }
-
-      &__button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        border: 0;
-        background: transparent;
-        cursor: pointer;
-        padding: 0px 8px;
-        height: 100%;
-        font: inherit;
-        color: inherit;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.06);
-        }
-
-        &:focus-visible {
-          outline: 2px solid rgba(0, 0, 0, 0.35);
-          outline-offset: 2px;
-        }
-      }
-
-      &__value {
-        font-size: 12px;
-        font-weight: 500;
-        letter-spacing: 0.02em;
-      }
-
-      &__chevron {
-        transition: transform 160ms ease;
-      }
-
-      // rotate chevron when open
-      .is-open ~ &__button &__chevron {
-        transform: rotate(180deg);
-      }
-
-      &__dropdown {
-        position: absolute;
-        bottom: calc(100% + 8px);
-        left: 0;
-        min-width: 190px;
-        background: #fff;
-        border-radius: 12px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        padding: 6px;
-
-        opacity: 0;
-        transform: translateY(-6px);
-        pointer-events: none;
-        transition: opacity 140ms ease, transform 140ms ease;
-        z-index: 50;
-
-        @include mixins.media-md {
-          bottom: auto;
-          left: auto;
-          top: calc(100% + 8px);
-          right: 0;
-        }
-
-        &.is-open {
-          opacity: 1;
-          transform: translateY(0);
-          pointer-events: auto;
-        }
-      }
-
-      &__option {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 40px 1fr;
-        gap: 10px;
-        align-items: center;
-        text-align: left;
-
-        border: 0;
-        background: transparent;
-        cursor: pointer;
-
-        padding: 10px 10px;
-        border-radius: 10px;
-        font: inherit;
-        color: inherit;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.06);
-        }
-
-        &:focus-visible {
-          outline: 2px solid rgba(0, 0, 0, 0.35);
-          outline-offset: 2px;
-        }
-
-        &.is-active {
-          background: rgba(0, 0, 0, 0.08);
-        }
-
-        &__code {
-          font-weight: 500;
-          letter-spacing: 0.02em;
-        }
-
-        &__label {
-          opacity: 0.85;
-          font-size: 0.95em;
-        }
-      }
-    }
-  }
-
-  &__primary {
-    background: var(--tide-booking-nav-background);
-    border: var(--tide-booking-nav-border);
-    border-radius: var(--tide-booking-nav-border-radius);
-    box-shadow: var(--tide-booking-nav-box-shadow);
-    position: sticky;
-    display: flex;
-    align-items: center;
-    top: 0px;
-    left: 0;
-    height: 60px;
-    z-index: 20;
-
-    @include mixins.media-md {
-      height: 80px;
-    }
-  }
-
-  &__container {
-    @include mixins.container-wide();
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 20px;
-    height: 100%;
-    z-index: 0;
-    background: var(--tide-booking-nav-container-background);
-    box-shadow: var(--tide-booking-nav-container-box-shadow);
-    border: var(--tide-booking-nav-container-border);
-    border-radius: var(--tide-booking-nav-container-border-radius);
-  }
-
-  &__wrapper {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 20px;
-  }
-
-  &__logo {
-    width: auto;
-    height: 100%;
-    padding: 15px 0px;
-    cursor: pointer;
-
-    svg {
-      height: 100%;
-      width: auto;
-      display: block;
-    }
-
-    img {
-      height: 100%;
-      width: auto;
-      display: block;
-    }
-  }
-
-  &__links {
-    display: none;
-    align-items: center;
-    height: 100%;
-
-    @include mixins.media-md {
-      display: flex;
-    }
-  }
-
-  &__link {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
-    padding: 0 15px;
-    text-decoration: var(--tide-booking-nav-link-text-decoration);
-    color: var(--tide-booking-nav-link-color);
-    background: var(--tide-booking-nav-link-background);
-    border-bottom: var(--tide-booking-nav-link-border-bottom);
-    line-height: var(--tide-booking-nav-link-font-line-height);
-    font-weight: var(--tide-booking-nav-link-font-weight);
-    font-family: var(--tide-booking-nav-link-font-family);
-    transition: all 0.3s ease-in-out;
-
-    &:hover {
-      background: var(--tide-booking-nav-link-hover-background);
-      color: var(--tide-booking-nav-link-hover-color);
-      border-bottom: var(--tide-booking-nav-link-hover-border-bottom);
-      text-decoration: var(--tide-booking-nav-link-hover-text-decoration);
-    }
-
-    &:focus {
-      background: var(--tide-booking-nav-link-active-background);
-      color: var(--tide-booking-nav-link-active-color);
-      border-bottom: var(--tide-booking-nav-link-active-border-bottom);
-      text-decoration: var(--tide-booking-nav-link-active-text-decoration);
-    }
-
-    &--active {
-      background: var(--tide-booking-nav-link-active-background);
-      color: var(--tide-booking-nav-link-active-color);
-      border-bottom: var(--tide-booking-nav-link-active-border-bottom);
-      text-decoration: var(--tide-booking-nav-link-active-text-decoration);
-
-      &:hover {
-        background: var(--tide-booking-nav-link-active-background);
-        color: var(--tide-booking-nav-link-active-color);
-        border-bottom: var(--tide-booking-nav-link-active-border-bottom);
-        text-decoration: var(--tide-booking-nav-link-active-text-decoration);
-      }
-    }
-  }
-
-  &__link-group {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    position: relative;
-
-    @include mixins.media-md {
-      position: static;
-    }
-
-    &--active {
-      .nav__link--has-dropdown::after {
-        transform: rotate(180deg);
-      }
-
-      .nav__dropdown {
-        position: relative;
-        opacity: 1;
-        transform: translateY(0);
-        pointer-events: auto;
-      }
-
-      .nav__dropdown--small {
-        opacity: 1;
-        pointer-events: auto;
-      }
-    }
-  }
-
-  &__link--has-dropdown {
-    &::after {
-      content: '';
-      display: inline-block;
-      margin-left: 8px;
-      width: 0;
-      height: 0;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 5px solid currentColor;
-      opacity: 0.7;
-      transform: rotate(0deg);
-      transition: all 300ms ease-in-out;
-    }
-  }
-
-  &__dropdown {
-    position: absolute;
-    width: 100%;
-    background: #fff;
-    border-top: none;
-    opacity: 0;
-    padding: 20px 0px;
-    transform: translateY(-10px);
-    pointer-events: none;
-    transition: opacity 180ms ease, transform 180ms ease; // below nav (20) but above content
-
-    @include mixins.media-md {
-      position: absolute;
-      left: 0;
-      top: 80px;
-      z-index: 19;
-      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
-    }
-
-    &__container {
-      @include mixins.container-wide();
-    }
-
-    &__cols {
-      display: grid;
-      grid-template-columns: 225px 1fr;
-      gap: 60px;
-    }
-
-    &__toggles {
-      display: flex;
-      flex-direction: column;
-    }
-
-    &__toggle {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      background: transparent;
-      color: gray;
-      border: none;
-      border-bottom: none;
-      font-size: 16px;
-      cursor: pointer;
-      padding: 15px;
-      text-align: left;
-      transition: all 0.3s ease-in-out;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      &:hover {
-        background: var(--tide-booking-gray-xlight);
-        border: none;
-        color: gray;
-        border-bottom: none;
-
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-
-      &--active {
-        color: #333399;
-        background: #f8f8fd;
-        border: none;
-        border-bottom: none;
-      }
-    }
-
-    &__col {
-      max-height: 22.125rem;
-      overflow-x: hidden;
-      overflow-y: auto;
-      @extend %scrollbar-thin;
-
-      &__items {
-        column-count: 4;
-        column-gap: 2rem;
-      }
-    }
-
-    &__item {
-      margin-bottom: 20px;
-
-      a {
-        color: #666666;
-        text-decoration: none;
-        transition: all 0.3s ease-in-out;
-
-        &:hover {
-          color: #333399;
-          text-decoration: underline;
-        }
-      }
-    }
-
-    &--small {
-      left: 0px;
-      top: 0px;
-      width: auto;
-      border-radius: 0px;
-      border: 1px solid rgba(0, 0, 0, 0.08);
-      padding: 20px 30px;
-      padding-bottom: 0px;
-      display: flex;
-      flex-direction: column;
-      gap: 0px;
-
-      @include mixins.media-md {
-        width: auto;
-        left: 50%;
-        top: 80px;
-        transform: translate(-50%, -10px);
-        width: auto;
-      }
-    }
-  }
-
-  &__link-group--small {
-    position: relative;
-  }
-
-  &__link-group:hover,
-  &__link-group:focus-within {
-    .nav__link--has-dropdown::after {
-      transform: rotate(180deg);
-    }
-
-    .nav__dropdown {
-      @include mixins.media-md {
-        position: absolute;
-        opacity: 1;
-        transform: translateY(0);
-        pointer-events: auto;
-      }
-    }
-
-    .nav__dropdown--small {
-      @include mixins.media-md {
-        position: absolute;
-        opacity: 1;
-        transform: translate(-50%, 0);
-        pointer-events: auto;
-      }
-    }
-  }
-
-  &__search {
-    display: none; // desktop search hidden by default (mobile uses --mobile form)
-    align-items: center;
-    height: 100%;
-
-    @include mixins.media-md {
-      display: flex;
-    }
-
-    &__form {
-      height: 100%;
-      display: flex;
-      align-items: center;
-    }
-
-    &__field {
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
-
-    &__input {
-      width: 220px;
-      height: 100%;
-
-      padding: 0 30px 0 16px; // room for button
-      font: inherit;
-      color: inherit;
-
-      @include mixins.media-md {
-        width: 240px;
-      }
-    }
-
-    &__button {
-      position: absolute;
-      right: 6px;
-      top: 50%;
-      transform: translateY(-50%);
-
-      width: 34px;
-      height: 34px;
-      border-radius: 999px;
-
-      border: 0;
-      cursor: pointer;
-      background: transparent;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-
-      transition: background 0.3s ease-in-out;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.06);
-        color: inherit;
-      }
-
-      &:focus-visible {
-        outline: 2px solid rgba(0, 0, 0, 0.35);
-        outline-offset: 2px;
-      }
-    }
-
-    &__clear {
-      position: absolute;
-      right: 40px; // left of search button
-      top: 50%;
-      transform: translateY(-50%);
-
-      width: 28px;
-      height: 28px;
-      border-radius: 999px;
-
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-
-      border: 0;
-      background: transparent;
-      cursor: pointer;
-
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.15s ease, background 0.15s ease;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.06);
-      }
-
-      &:focus-visible {
-        outline: 2px solid rgba(0, 0, 0, 0.35);
-        outline-offset: 2px;
-      }
-    }
-
-    &__field--has-value {
-      .nav__search__clear {
-        opacity: 1;
-        pointer-events: auto;
-      }
-    }
-
-    &__form--mobile {
-      display: flex;
-      width: 100%;
-      padding: 14px 20px 8px;
-
-      // Mobile menu exists only under md, but make sure this doesn't show on desktop
-      @include mixins.media-md {
-        display: none;
-      }
-
-      .nav__search__field {
-        width: 100%;
-        height: 46px;
-      }
-
-      .nav__search__input {
-        width: 100%;
-        padding: 0 44px 0 14px;
-      }
-    }
-  }
-
-  &__menu {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    padding: 0;
-
-    @include mixins.media-md {
-      display: none;
-    }
-
-    &__line {
-      fill: none;
-      stroke: black;
-      stroke-width: 6;
-      transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
-
-      &--1 {
-        stroke-dasharray: 60 207;
-        stroke-width: 6;
-      }
-
-      &--2 {
-        stroke-dasharray: 60 60;
-        stroke-width: 6;
-      }
-
-      &--3 {
-        stroke-dasharray: 60 207;
-        stroke-width: 6;
-      }
-    }
-
-    &--opened {
-      .nav__menu__line {
-        &--1 {
-          stroke-dasharray: 90 207;
-          stroke-dashoffset: -134;
-          stroke-width: 6;
-        }
-
-        &--2 {
-          stroke-dasharray: 1 60;
-          stroke-dashoffset: -30;
-          stroke-width: 6;
-        }
-
-        &--3 {
-          stroke-dasharray: 90 207;
-          stroke-dashoffset: -134;
-          stroke-width: 6;
-        }
-      }
-    }
-  }
-
-  &__mobile-menu {
-    position: absolute;
-    top: 60px;
-    left: 0;
-    width: 100%;
-    height: 0vh;
-    background: var(--tide-booking-nav-mobile-menu-background);
-    border: var(--tide-booking-nav-mobile-menu-border);
-    border-radius: var(--tide-booking-nav-mobile-menu-border-radius);
-    box-shadow: var(--tide-booking-nav-mobile-menu-box-shadow);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    z-index: -5;
-    opacity: 0;
-    padding-bottom: 20px;
-    transform: translateY(-1000px);
-    transition: all 0.3s ease-in-out;
-
-    @include mixins.media-md {
-      display: none;
-    }
-
-    &--active {
-      opacity: 1;
-      transform: translateY(0);
-      height: calc(100vh - 60px);
-      z-index: -1;
-    }
-
-    &__wrapper {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    &__link {
-      width: 100%;
-      padding: 20px;
-      text-align: center;
-      display: flex;
-      align-items: center;
-      justify-content: start;
-      gap: 5px;
-      text-decoration: var(--tide-booking-nav-link-text-decoration);
-      color: var(--tide-booking-nav-link-color);
-      background: var(--tide-booking-nav-link-background);
-      border-bottom: solid 1.5px #efefef;
-      line-height: var(--tide-booking-nav-link-font-line-height);
-      font-weight: var(--tide-booking-nav-link-font-weight);
-      font-family: var(--tide-booking-nav-link-font-family);
-      transition: all 0.3s ease-in-out;
-
-      &:hover {
-        background: var(--tide-booking-nav-link-hover-background);
-        color: var(--tide-booking-nav-link-hover-color);
-        border-bottom: var(--tide-booking-nav-link-hover-border-bottom);
-        text-decoration: var(--tide-booking-nav-link-hover-text-decoration);
-      }
-
-      &--active {
-        background: var(--tide-booking-nav-link-active-background);
-        color: var(--tide-booking-nav-link-active-color);
-        border-bottom: var(--tide-booking-nav-link-active-border-bottom);
-        text-decoration: var(--tide-booking-nav-link-active-text-decoration);
-
-        &:hover {
-          background: var(--tide-booking-nav-link-active-background);
-          color: var(--tide-booking-nav-link-active-color);
-          border-bottom: var(--tide-booking-nav-link-active-border-bottom);
-          text-decoration: var(--tide-booking-nav-link-active-text-decoration);
-        }
-      }
-    }
-
-    .nav__subnav {
-      &__links {
-        height: 30px;
-      }
-    }
-  }
-}
+@use '../components/mixins' as mixins;
+
+.nav {
+  &__subnav {
+    background: var(--tide-booking-subnav-background);
+    border: var(--tide-booking-subnav-border);
+    border-radius: var(--tide-booking-subnav-border-radius);
+    box-shadow: var(--tide-booking-subnav-box-shadow);
+    height: 40px;
+    display: none;
+    align-items: center;
+
+    @include mixins.media-md {
+      display: flex;
+    }
+
+    &__container {
+      @include mixins.container-wide();
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+    }
+
+    &__links {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      height: 100%;
+    }
+
+    &__link {
+      background: var(--tide-booking-subnav-link-background);
+      border-bottom: var(--tide-booking-subnav-link-border-bottom);
+      text-decoration: var(--tide-booking-subnav-link-text-decoration);
+      color: var(--tide-booking-subnav-link-color);
+      font-weight: var(--tide-booking-subnav-link-font-weight);
+      font-family: var(--tide-booking-subnav-link-font-family);
+      font-size: 12px;
+      padding: 0 8px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        background: var(--tide-booking-subnav-link-hover-background);
+        border-bottom: var(--tide-booking-subnav-link-hover-border-bottom);
+        text-decoration: var(--tide-booking-subnav-link-hover-text-decoration);
+        color: var(--tide-booking-subnav-link-hover-color);
+      }
+    }
+
+    &__member {
+      color: var(--tide-booking-subnav-link-color);
+      font-weight: var(--tide-booking-subnav-link-font-weight);
+      font-family: var(--tide-booking-subnav-link-font-family);
+      font-size: 12px;
+      padding: 0 8px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+    }
+
+    &__languages {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      height: 100%;
+
+      &__icon {
+        opacity: 0.85;
+      }
+
+      &__button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        padding: 0px 8px;
+        height: 100%;
+        font: inherit;
+        color: inherit;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.06);
+        }
+
+        &:focus-visible {
+          outline: 2px solid rgba(0, 0, 0, 0.35);
+          outline-offset: 2px;
+        }
+      }
+
+      &__value {
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.02em;
+      }
+
+      &__chevron {
+        transition: transform 160ms ease;
+      }
+
+      // rotate chevron when open
+      .is-open ~ &__button &__chevron {
+        transform: rotate(180deg);
+      }
+
+      &__dropdown {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        left: 0;
+        min-width: 190px;
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        padding: 6px;
+
+        opacity: 0;
+        transform: translateY(-6px);
+        pointer-events: none;
+        transition: opacity 140ms ease, transform 140ms ease;
+        z-index: 50;
+
+        @include mixins.media-md {
+          bottom: auto;
+          left: auto;
+          top: calc(100% + 8px);
+          right: 0;
+        }
+
+        &.is-open {
+          opacity: 1;
+          transform: translateY(0);
+          pointer-events: auto;
+        }
+      }
+
+      &__option {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 40px 1fr;
+        gap: 10px;
+        align-items: center;
+        text-align: left;
+
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+
+        padding: 10px 10px;
+        border-radius: 10px;
+        font: inherit;
+        color: inherit;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.06);
+        }
+
+        &:focus-visible {
+          outline: 2px solid rgba(0, 0, 0, 0.35);
+          outline-offset: 2px;
+        }
+
+        &.is-active {
+          background: rgba(0, 0, 0, 0.08);
+        }
+
+        &__code {
+          font-weight: 500;
+          letter-spacing: 0.02em;
+        }
+
+        &__label {
+          opacity: 0.85;
+          font-size: 0.95em;
+        }
+      }
+    }
+  }
+
+  &__primary {
+    background: var(--tide-booking-nav-background);
+    border: var(--tide-booking-nav-border);
+    border-radius: var(--tide-booking-nav-border-radius);
+    box-shadow: var(--tide-booking-nav-box-shadow);
+    position: sticky;
+    display: flex;
+    align-items: center;
+    top: 0px;
+    left: 0;
+    height: 60px;
+    z-index: 20;
+
+    @include mixins.media-md {
+      height: 80px;
+    }
+  }
+
+  &__container {
+    @include mixins.container-wide();
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    height: 100%;
+    z-index: 0;
+    background: var(--tide-booking-nav-container-background);
+    box-shadow: var(--tide-booking-nav-container-box-shadow);
+    border: var(--tide-booking-nav-container-border);
+    border-radius: var(--tide-booking-nav-container-border-radius);
+  }
+
+  &__wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 20px;
+  }
+
+  &__logo {
+    width: auto;
+    height: 100%;
+    padding: 15px 0px;
+    cursor: pointer;
+
+    svg {
+      height: 100%;
+      width: auto;
+      display: block;
+    }
+
+    img {
+      height: 100%;
+      width: auto;
+      display: block;
+    }
+  }
+
+  &__links {
+    display: none;
+    align-items: center;
+    height: 100%;
+
+    @include mixins.media-md {
+      display: flex;
+    }
+  }
+
+  &__link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 0 15px;
+    text-decoration: var(--tide-booking-nav-link-text-decoration);
+    color: var(--tide-booking-nav-link-color);
+    background: var(--tide-booking-nav-link-background);
+    border-bottom: var(--tide-booking-nav-link-border-bottom);
+    line-height: var(--tide-booking-nav-link-font-line-height);
+    font-weight: var(--tide-booking-nav-link-font-weight);
+    font-family: var(--tide-booking-nav-link-font-family);
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+      background: var(--tide-booking-nav-link-hover-background);
+      color: var(--tide-booking-nav-link-hover-color);
+      border-bottom: var(--tide-booking-nav-link-hover-border-bottom);
+      text-decoration: var(--tide-booking-nav-link-hover-text-decoration);
+    }
+
+    &:focus {
+      background: var(--tide-booking-nav-link-active-background);
+      color: var(--tide-booking-nav-link-active-color);
+      border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+      text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+    }
+
+    &--active {
+      background: var(--tide-booking-nav-link-active-background);
+      color: var(--tide-booking-nav-link-active-color);
+      border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+      text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+
+      &:hover {
+        background: var(--tide-booking-nav-link-active-background);
+        color: var(--tide-booking-nav-link-active-color);
+        border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+        text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+      }
+    }
+  }
+
+  &__link-group {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: relative;
+
+    @include mixins.media-md {
+      position: static;
+    }
+
+    &--active {
+      .nav__link--has-dropdown::after {
+        transform: rotate(180deg);
+      }
+
+      .nav__dropdown {
+        position: relative;
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+
+      .nav__dropdown--small {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__link--has-dropdown {
+    &::after {
+      content: '';
+      display: inline-block;
+      margin-left: 8px;
+      width: 0;
+      height: 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 5px solid currentColor;
+      opacity: 0.7;
+      transform: rotate(0deg);
+      transition: all 300ms ease-in-out;
+    }
+  }
+
+  &__dropdown {
+    position: absolute;
+    width: 100%;
+    background: #fff;
+    border-top: none;
+    opacity: 0;
+    padding: 20px 0px;
+    transform: translateY(-10px);
+    pointer-events: none;
+    transition: opacity 180ms ease, transform 180ms ease; // below nav (20) but above content
+
+    @include mixins.media-md {
+      position: absolute;
+      left: 0;
+      top: 80px;
+      z-index: 19;
+      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
+    }
+
+    &__container {
+      @include mixins.container-wide();
+    }
+
+    &__cols {
+      display: grid;
+      grid-template-columns: 225px 1fr;
+      gap: 60px;
+    }
+
+    &__toggles {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__toggle {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      background: transparent;
+      color: gray;
+      border: none;
+      border-bottom: none;
+      font-size: 16px;
+      cursor: pointer;
+      padding: 15px;
+      text-align: left;
+      transition: all 0.3s ease-in-out;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background: var(--tide-booking-gray-xlight);
+        border: none;
+        color: gray;
+        border-bottom: none;
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      &--active {
+        color: #333399;
+        background: #f8f8fd;
+        border: none;
+        border-bottom: none;
+      }
+    }
+
+    &__col {
+      max-height: 22.125rem;
+      overflow-x: hidden;
+      overflow-y: auto;
+      @extend %scrollbar-thin;
+
+      &__items {
+        column-count: 4;
+        column-gap: 2rem;
+      }
+    }
+
+    &__item {
+      margin-bottom: 20px;
+
+      a {
+        color: #666666;
+        text-decoration: none;
+        transition: all 0.3s ease-in-out;
+
+        &:hover {
+          color: #333399;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &--small {
+      left: 0px;
+      top: 0px;
+      width: auto;
+      border-radius: 0px;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      padding: 20px 30px;
+      padding-bottom: 0px;
+      display: flex;
+      flex-direction: column;
+      gap: 0px;
+
+      @include mixins.media-md {
+        width: auto;
+        left: 50%;
+        top: 80px;
+        transform: translate(-50%, -10px);
+        width: auto;
+      }
+    }
+  }
+
+  &__link-group--small {
+    position: relative;
+  }
+
+  &__link-group:hover,
+  &__link-group:focus-within {
+    .nav__link--has-dropdown::after {
+      transform: rotate(180deg);
+    }
+
+    .nav__dropdown {
+      @include mixins.media-md {
+        position: absolute;
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+    }
+
+    .nav__dropdown--small {
+      @include mixins.media-md {
+        position: absolute;
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__search {
+    display: none; // desktop search hidden by default (mobile uses --mobile form)
+    align-items: center;
+    height: 100%;
+
+    @include mixins.media-md {
+      display: flex;
+    }
+
+    &__form {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    &__field {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    &__input {
+      width: 220px;
+      height: 100%;
+
+      padding: 0 30px 0 16px; // room for button
+      font: inherit;
+      color: inherit;
+
+      @include mixins.media-md {
+        width: 240px;
+      }
+    }
+
+    &__button {
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      width: 34px;
+      height: 34px;
+      border-radius: 999px;
+
+      border: 0;
+      cursor: pointer;
+      background: transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      transition: background 0.3s ease-in-out;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.06);
+        color: inherit;
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgba(0, 0, 0, 0.35);
+        outline-offset: 2px;
+      }
+    }
+
+    &__clear {
+      position: absolute;
+      right: 40px; // left of search button
+      top: 50%;
+      transform: translateY(-50%);
+
+      width: 28px;
+      height: 28px;
+      border-radius: 999px;
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s ease, background 0.15s ease;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.06);
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgba(0, 0, 0, 0.35);
+        outline-offset: 2px;
+      }
+    }
+
+    &__field--has-value {
+      .nav__search__clear {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    &__form--mobile {
+      display: flex;
+      width: 100%;
+      padding: 14px 20px 8px;
+
+      // Mobile menu exists only under md, but make sure this doesn't show on desktop
+      @include mixins.media-md {
+        display: none;
+      }
+
+      .nav__search__field {
+        width: 100%;
+        height: 46px;
+      }
+
+      .nav__search__input {
+        width: 100%;
+        padding: 0 44px 0 14px;
+      }
+    }
+  }
+
+  &__menu {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    padding: 0;
+
+    @include mixins.media-md {
+      display: none;
+    }
+
+    &__line {
+      fill: none;
+      stroke: black;
+      stroke-width: 6;
+      transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+
+      &--1 {
+        stroke-dasharray: 60 207;
+        stroke-width: 6;
+      }
+
+      &--2 {
+        stroke-dasharray: 60 60;
+        stroke-width: 6;
+      }
+
+      &--3 {
+        stroke-dasharray: 60 207;
+        stroke-width: 6;
+      }
+    }
+
+    &--opened {
+      .nav__menu__line {
+        &--1 {
+          stroke-dasharray: 90 207;
+          stroke-dashoffset: -134;
+          stroke-width: 6;
+        }
+
+        &--2 {
+          stroke-dasharray: 1 60;
+          stroke-dashoffset: -30;
+          stroke-width: 6;
+        }
+
+        &--3 {
+          stroke-dasharray: 90 207;
+          stroke-dashoffset: -134;
+          stroke-width: 6;
+        }
+      }
+    }
+  }
+
+  &__mobile-menu {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 100%;
+    height: 0vh;
+    background: var(--tide-booking-nav-mobile-menu-background);
+    border: var(--tide-booking-nav-mobile-menu-border);
+    border-radius: var(--tide-booking-nav-mobile-menu-border-radius);
+    box-shadow: var(--tide-booking-nav-mobile-menu-box-shadow);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    z-index: -5;
+    opacity: 0;
+    padding-bottom: 20px;
+    transform: translateY(-1000px);
+    transition: all 0.3s ease-in-out;
+
+    @include mixins.media-md {
+      display: none;
+    }
+
+    &--active {
+      opacity: 1;
+      transform: translateY(0);
+      height: calc(100vh - 60px);
+      z-index: -1;
+    }
+
+    &__wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__link {
+      width: 100%;
+      padding: 20px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      gap: 5px;
+      text-decoration: var(--tide-booking-nav-link-text-decoration);
+      color: var(--tide-booking-nav-link-color);
+      background: var(--tide-booking-nav-link-background);
+      border-bottom: solid 1.5px #efefef;
+      line-height: var(--tide-booking-nav-link-font-line-height);
+      font-weight: var(--tide-booking-nav-link-font-weight);
+      font-family: var(--tide-booking-nav-link-font-family);
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        background: var(--tide-booking-nav-link-hover-background);
+        color: var(--tide-booking-nav-link-hover-color);
+        border-bottom: var(--tide-booking-nav-link-hover-border-bottom);
+        text-decoration: var(--tide-booking-nav-link-hover-text-decoration);
+      }
+
+      &--active {
+        background: var(--tide-booking-nav-link-active-background);
+        color: var(--tide-booking-nav-link-active-color);
+        border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+        text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+
+        &:hover {
+          background: var(--tide-booking-nav-link-active-background);
+          color: var(--tide-booking-nav-link-active-color);
+          border-bottom: var(--tide-booking-nav-link-active-border-bottom);
+          text-decoration: var(--tide-booking-nav-link-active-text-decoration);
+        }
+      }
+    }
+
+    .nav__subnav {
+      &__links {
+        height: 30px;
+      }
+    }
+  }
+}