@import 'settings';

// Navigation
//
// Weight: 2
//
// Style guide: molecules.navigation


// Base class
// --------------------------------------------------

body {
  &.open-dropdown-menu {
    @include for-tablet-landscape-down {
      position: fixed !important;
      width: 100%;
      height: auto !important;
      top: 0;
      left: 0;
      overflow: hidden;
    }
  }
}

.nav {
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;

  > li {

    > a,
    > button,
    > span {
      position: relative;
      display: block;
      padding: $nav-link-padding;
      border: none;

      &:hover,
      &:focus {
        text-decoration: none;
      }
    }

    > button {
      background-color: transparent;
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.disabled > a,
    &.disabled > button,
    &.disabled > span {

      &:hover,
      &:focus {
        text-decoration: none;
        background-color: transparent;
        cursor: $cursor-disabled;
      }
    }
    &.desktop {
      @include for-phone-only {
        display: none;
      }
    }
  }

}


//
// Navbars
// --------------------------------------------------


// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.page-preview .navbar-default {
  position: relative;
  z-index: 10;
}
.page-preview .main-container {
  padding-top: 0;
}

.navbar-default {
  position: relative;
}

.navbar {
  position: relative;
  min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  margin-bottom: $navbar-margin-bottom;
  font-size: $navbar-font-size;
}

.container--navbar {
  display: flex;

  @include for-tablet-landscape-down {
    flex-wrap: wrap;
  }
}

// align this item last
.navbar-user {
  order: 1;

  [dir='ltr'] & {
    margin-left: auto;
  }

  [dir='rtl'] & {
    margin-right: auto;
  }

  @include for-tablet-landscape-up {
    order: 10;

    .nav {
      flex-wrap: nowrap;
    }
  }

  .profile .profile {
    width: 24px;
    height: 24px;
  }

  .not-logged-in {
    ul {
      a {
        white-space: nowrap;
      }
    }
  }

  .dropdown-menu {
    right: 0;
    left: auto;

    [dir='rtl'] & {
      right: auto;
      left: 0;
    }
  }

  // If we use the mobile app.
  .is-mobile-app & {
    display: flex;
    align-items: center;
  }
}


.block-social-language,
.block-language {
  order: 4;

  a.dropdown-toggle {
    height: 50px;
    padding-top: .875rem;
  }

  // Move the language switcher left of the user menu.
  @include for-tablet-landscape-up {
    margin-left: auto;

    // Disable spacing between user menu and social language block.
    ~ .navbar-user {
      margin-left: 0;
    }
  }

  .dropdown > .dropdown-toggle {
    white-space: nowrap;
  }
}

.navbar-header {
  order: 0;
}

.navbar-search {
  @include for-tablet-landscape-up {
    display: none;
  }
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;

  > li > a,
  > li > button,
  > li > span {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: $line-height-computed;
  }

  // Uncollapse the nav
  @include for-tablet-landscape-up {

    > li > a,
    > li > button,
    > li > span {
      padding-top: $navbar-padding-vertical;
      padding-bottom: $navbar-padding-vertical;
    }

  }

  // Margin-bottom space for the main menu on the desktop screen.
  &.main {
    @include for-tablet-landscape-up {
      margin-bottom: $navbar-padding-vertical;
    }

    > li {
      max-width: 100%;

      @include for-tablet-landscape-up {
        max-width: none;

        // Add negative margin-bottom for the menu items on the desktop screen.
        margin-bottom: -$navbar-padding-vertical;
      }
    }
  }

  // Second level menu
  > li > ul {
    > li.expanded {
      position: relative;

      @media(min-width: 1025px) {
        > a,
        > span {
          padding-right: 25px;

          &:hover:not(.is-active)  {
            + .dropdown-menu {
              display: block;
            }
          }
        }
      }

      .caret {
        transform: rotate(0);

        @media(min-width: 1025px) {
          position: absolute;
          top: 44%;
          right: 5px;
          transform: rotate(-90deg) translateY(-50%);

          [dir='rtl'] & {
            right: auto;
            left: 10px;

            transform: rotate(90deg) translateY(-50%);
          }
        }
      }

      > .dropdown-menu {
        margin-top: 0;
        padding-top: 5px;

        @media(min-width: 1025px) {
          display: none;
          top: 0;
          left: 100%;
          padding-top: 0;

          [dir='rtl'] & {
            right: 100%;
            left: auto;
          }
        }

        @media(max-width: 1024px) {
          @include dropdown-open;
        }

        @include dropdown-Ipad;

        > li > a,
        > li > button,
        > li > span {
          @media(min-width: 768px) and (max-width: 1024px) {
            @include dropdown-el;
          }

          @include dropdown-el-Ipad;

          @include for-tablet-landscape-down {
            padding-left: 45px;

            &:hover,
            &.is-active {
              background: #e6e6e6;
              color: #343434;
            }
          }
        }

        @media(min-width: 1025px) {
          &:hover {
            display: block;
          }
        }

        &.open {
          display: none;
        }
      }
    }
  }
}

.navbar-user > li > a,
.navbar-user > li > button,
.navbar-user > li > span,
.navbar-user .navbar-nav > li > a,
.navbar-user .navbar-nav > li > button,
.navbar-user .navbar-nav > li > span {
  padding: 13px 10px 8px;
  height: 50px;
}

// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.

.navbar-collapse {
  overflow-x: visible;
  border-top: 1px solid transparent;
  -webkit-overflow-scrolling: touch;
  order: 2;
  max-height: $navbar-collapse-max-height;

  @media screen and (max-height: 480px) {
    max-height: 420px;
  }

  &.in {
    overflow-y: auto;
  }

  @include for-tablet-landscape-up {
    width: auto;
    border-top: 0;
    padding-left: 0;
    padding-right: 0;

    &.collapse {
      display: flex !important;
      height: auto !important;
      padding-bottom: 0; // Override default setting
      overflow: visible !important;
    }

    &.in {
      overflow-y: visible;
    }

  }
}


//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.


// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top {
  @include z-depth-3;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-navbar-fixed;

  // Media query from Gin theme.
  .toolbar-fixed[data-toolbar-menu='open'] & {
    @media (min-width: 976px) {
      left: 240px;
    }
  }

  .gin--vertical-toolbar.user-logged-in & {
    @media (min-width: 976px) {
      [dir='ltr'] & {
        left: 68px;
      }

      [dir='rtl'] & {
        right: 68px;
      }
    }
  }

  @include for-tablet-landscape-up {

    .navbar-nav {
      padding-left: 10px;
    }

  }

}

// Brand/project name

.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: $navbar-height;
  overflow: hidden;

  > img {
    display: block;
    max-height: 50px;
    max-width: 200px;
    width: auto;
    pointer-events: none;
  }

}


// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
  position: relative;
  display: inline-block;
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 0;
  color: white;
  font-weight: 500;
  padding: 8px 10px;
  height: 50px;
  min-width: 50px;
  line-height: 32px;

  // We remove the `outline` here, but later compensate by attaching `:hover`
  // styles to `:focus`.
  &:focus {
    outline: 0;
  }

  @include for-tablet-landscape-up {
    display: none;
  }

  // If we use the mobile app.
  .is-mobile-app & {
    display: none;
  }
}


// Icons in the navbar

.navbar-nav__icon {
  width: 24px;
  height: 24px;
  display: inline-block;

  // Click events are swallowed by SVG <use> elements in IE/Edge.
  // See https://github.com/facebook/react/issues/4963
  pointer-events: none;

  + .badge {
    position: absolute;
    top: 8px;
    right: 0;
  }
}


// Dropdown menus

// Menu position
.navbar-nav > .dropdown > .dropdown-menu {
  margin-top: 0;

  [dir='rtl'] & {
    left: auto;
    right: 0;
  }
}

.navbar-nav > .dropup > .dropdown-menu {
  margin-bottom: 0;
}


@include for-tablet-landscape-down {
  // Dropdowns get same display when collapsed
  // This is an override of bootstrap navbar line 241
  .navbar-nav .open .dropdown-menu {
    background-color: $dropdown-bg;
    border: 0;
    @include z-depth-4;
    position: fixed;
    top: auto;
    margin: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;

    li {
      transform: translateZ(0);
    }
  }

  // If users have the gin toolbar, we need to adjust the height.
  .gin--vertical-toolbar .navbar-fixed-top .navbar-nav .open .dropdown-menu {
    height: calc(100% - 89px);
  }

  .navbar-collapse {
    flex: 1 0 100%;

    .navbar-nav {
      margin: ($navbar-padding-vertical / 2) 0;
      flex-direction: column;
      order: 1;
    }

    .navbar-nav > li > a {
      padding: 5px 15px;

      &.dropdown-toggle {
        pointer-events: none;
      }
    }

    .dropdown-menu {
      display: block;
      position: relative;
      width: 100%;
      background-color: transparent;
      float: none;
      max-width: none;
      padding-top: 0;
      box-shadow: none;

      li a,
      li button,
      li span:not(.caret) {
        padding: 5px 15px;

        [dir='ltr'] & {
          padding-left: 30px;
        }

        [dir='rtl'] & {
          padding-right: 30px;
        }
      }

    }

  }

}

.navbar-default .navbar-nav > .open {
  > a, > button, > span {
    &, &:focus, &:hover {
      transition: color .2s ease, background-color .2s ease;
    }
  }
}

// Display profile dropdown links inline when larger than tab portrait
@include for-tablet-landscape-up {

  .not-logged-in.dropdown.profile .dropdown-toggle {
    display: none;
  }

}

.navbar__open-search-control {
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
  z-index: 1;

  @include for-tablet-landscape-down {
    display: none;
  }
}

.navbar__open-search-block {
  display: block;
  border: 0;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  padding: 0;
  transform-origin: 50%;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;

  // If we use the mobile app.
  &--is-mobile-app {
    display: block;
    height: 50px;
    padding: 13px 10px 8px;
  }
}

.navbar-nav__icon--search {
  position: absolute;
  top: 14px;
  left: 13px;
  transition: 0.2s ease-in-out;
  pointer-events: none;

  // If we use the mobile app.
  &--is-mobile-app {
    position: static;
  }
}

// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.

.navbar-search {

  .search-content-form {
    padding: 10px 10px 5px;
    border: 0;
    position: relative;

    .form-group {
      margin-bottom: 0;
    }

    .form-control {
      padding: $padding-base-vertical 38px $padding-base-vertical $padding-base-horizontal;
      max-width: none;
      border: 0;
    }

    .form-submit {
      width: 38px;
      height: 38px;
      display: block;
      position: absolute;
      overflow: hidden;
      right: 0;
      top: 0;
      line-height: 38px;
      cursor: pointer;
      font-size: 0;
      padding: 0;
      background-color: transparent;

      svg {
        width: 30px;
        height: 30px;
      }

    }
  }
}

.region--content-top .search-take-over,
.btn--close-search-take-over {
  @include for-tablet-landscape-down {
    display: none;
  }
}

@include for-tablet-landscape-up {

  .search-take-over {
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 19vh;
    width: 100%;
    z-index: $zindex-modal;
    pointer-events: none;
    transition: all 0.3s ease-in-out;

    .form-group:not(.form-actions) {
      margin: auto;
      width: 80%;
      max-width: 600px;
      display: flex;
      flex-wrap: wrap;
    }

    .form-text {
      font-size: 1.625em;
      height: 54px;
      border: 0;
      background: transparent;
      -webkit-appearance: none;
      outline: 0;
      border-radius: 0;
      border-bottom: 2px solid;
      font-weight: 500;
      max-width: none;
      flex: 1 1 80%;
      min-width: 0;
    }

    .form-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      min-width: 60px;
      background-color: transparent;
      margin-left: 20px;
      padding: 0;
      font-size: 0;
      text-indent: -9999px;
      cursor: pointer;
      flex: 0 0 60px;

      &:focus,
      &:focus-visible {
        outline: -webkit-focus-ring-color auto 1px;
      }

      svg {
        width: 50px;
        height: 50px;
      }

    }

    .social-search-suggestions {
      flex-basis: 100%;
    }

  }

  .btn--close-search-take-over {
    background-color: transparent;
    border: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    position: fixed;
    top: 80px;
    right: 80px;
    opacity: 0;
    transform: scale(1);
    transition: transform 0.2s linear;

    &:focus,
    &:focus-visible {
      outline: -webkit-focus-ring-color auto 1px;
    }

    &:hover {
      transform: scale(1.1);
    }

    svg {
      height: 48px;
      width: 100%;
    }
  }

  .mode-search {
    overflow: hidden;

    .search-take-over {
      display: initial;
      pointer-events: all;
    }

    .navbar__open-search-block {
      transform: scale(70);
      -moz-transform: scale(70) rotate(0.02deg);
      pointer-events: none;
      @include z-depth-3;
    }

    .navbar-nav__icon {
      opacity: 0;
    }

    .main-container {
      z-index: auto;
      pointer-events: none;
    }

    .btn--close-search-take-over {
      opacity: 1;
      pointer-events: all;
    }

    .navbar-default {
      z-index: 1030;
    }

  }

}

// Navbar secondary
//
// Make navbar scrollable on phones by wrapping `.nav` in `.navbar-scrollable`.
//
// markup: navbar-scrollable.twig
//
// Weight: 2
//
// Style guide: molecules.navigation.nav-tabs

.navbar-secondary {
  @include z-depth-2;
  z-index: 1; // make sure the shadow on top is below the hero and thus invisible.
  min-height: 46px;

  // Centers the navbar items
  .navbar-nav {
    justify-content: center;
    flex-wrap: nowrap;
    font-size: $font-size-base;
    line-height: 1.625rem;

    a, button, span:not(.caret) {
      transition: all 0.3s;
      white-space: nowrap;
      opacity: 0.75;
      border-bottom: 2px solid transparent;
    }

    li.active {
      a,
      button,
      span:not(.caret) {
        border-bottom: 2px solid transparent;
        opacity: 1;

        &:hover,
        &:focus {
          cursor: default;
        }
      }
    }
  }
}


// Navbar scrollable
// -------------------------
.navbar-scrollable {

  @include for-tablet-landscape-down {

    // Wrapper for hiding the FF scrollbar.
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 46px;

    // Absolute positioning tabs element so it hides the scrollbar for FF.
    .navbar-nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      -webkit-overflow-scrolling: touch;
      user-select: none;
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex; // Contents inline and expand the with of this element.
      justify-content: flex-start;

      // Hiding the Chrome and Safari scrollbar
      &::-webkit-scrollbar {
        display: none;
      }

    }

    // Visual indication that there is more content.
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 24px;
      height: 100%;
      top: 0;
      right: 0;
      z-index: 2;
    }

  }

}

// Open main navigation if JavaScript is disabled.
html:not(.js) {

  @include for-tablet-landscape-down {

    .navbar-header {

      &:focus,
      &:hover {

        & + .navbar-collapse {
          display: block;
        }

      }

    }

    .navbar-collapse {

      &:focus,
      &:hover {
        display: block;
      }
    }
  }
}
