// GLOBAL HEADER
.search-nav {
  border: 1px solid $base-white;
  padding: $base-spacing-1-4th $base-spacing-half;
  height: 30px;
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: -20px;
  opacity: 0;
  margin-right: 7px; // position magnifying icon on top of the search toggle
  transition: opacity ease-out 0.3s;

  input {
    border: none;
    background-color: transparent;
    min-height: 30px;
    font-size: 16px;
    color: $nobel-300;
    flex-grow: 100;
    outline: none;
    transition: width ease-out 0.3s;
    width: 0;
  }

  &.showing {
    opacity: 1;
  }

  &.show {
    input {
      width: 300px;
    }
  }

  &.has-error {
    border-color: $base-state-error;
  }
}

[data-btn="search-trigger"] {
  cursor: pointer;
}

.global-header {
  background-color: $base-black;
  position: relative;
  z-index: 12;

  .brand {
    padding-top: 20px;
    padding-bottom: 20px;
    height: 20px;
  }

  ul {
    list-style: none;
    margin: 0;

    a {
      color: $base-white;
      text-decoration: none;
    }

    &.dropdown-menu {
      display: none;
    }
  }

  .search-toggle {
    padding: 18px 16px;
    height: 24px;
    z-index: 1;
    display: flex;
    align-items: center;

    &.hide {
      display: none;
    }
  }
}

.global-header .global-nav,
.utility-nav {
  display: flex;
  padding-left: 64px;
  float: left;
  height: 100%;
  visibility: visible;
  opacity: 1;
  transition: visibility ease-out 0.3s, opacity ease-out 0.3s;
  z-index: 1;

  > li {
    transition: $base-transition-background;

    .arrow {
      width: 14px;
      height: 14px;
      margin-left: 8px;
      margin-right: 16px;

      &.up {
        display: none;
      }
    }

    div {
      height: 100%;
    }

    .dropdown-menu {
      background-color: $baltic-sea-600;
      position: absolute;
      width: max-content;
      min-width: 200px;
      max-width: 300px;
      box-shadow: $base-elevation-menu;
      padding: 2px 2px 0 2px;
      box-sizing: border-box;

      .nav-link {
        padding: $base-spacing-half $base-spacing;
        line-height: 1.5;
        font-weight: 400;
      }

      li {
        border-left: 1px solid $sky-blue-500;
        margin-bottom: 2px;
        transition: $base-transition-background;

        &:hover {
          background-color: $tundra-500;
        }

        &.active {
          background-color: $sky-blue-500;
        }
      }
    }

    .dropdown-menu.multi-selection {
      max-width: calc(#{$base-region-nav-width} + 4px + (2 * #{$base-spacing-1-half}));
      min-width: calc(#{$base-region-nav-width} + 4px + (2 * #{$base-spacing-1-half}));
      padding: $base-spacing-1-half;
      right: 0;

      .nav-title {
        color: $nobel-300;
        font-size: $base-font-site;
        line-height: 1;
        padding-bottom: $base-spacing-1-half;
        border-bottom: 1px solid $base-white;
        border-left: none;
        margin-bottom: $base-spacing-3-4th;

        &:hover {
          background-color: $baltic-sea-600;
        }
      }

      li:not(.nav-title) {
        border-left: none;
        text-align: center;
        width: calc(#{$base-region-nav-width} / 3);
        margin-right: 2px;
        float: left;
      }

      li:not(.nav-title):nth-child(3n + 1) {
        margin-right: 0;
      }

      .nav-link {
        width: 100%;
        font-weight: 500;
      }
    }

    .nav-link {
      padding: 20px 0 20px 16px;
      font-size: $base-font-header;
      font-weight: 500;
      letter-spacing: 0.5px;
      line-height: 1;
      flex-grow: 100;

      &.without-arrow {
        padding-right: 16px;
      }
    }
  }

  > li:hover {
    background-color: $baltic-sea-600;

    .up {
      display: block;
    }

    .down {
      display: none;
    }

    .dropdown-menu {
      display: block;
    }
  }

  &.hiding {
    visibility: hidden;
    opacity: 0;
  }

  &.hide {
    display: none;
  }
}

.site-header {
  background-color: $baltic-sea-600;
  position: relative;
  z-index: 11;

  ul {
    list-style: none;
    margin: 0;

    a {
      color: $base-white;
      text-decoration: none;
    }

    &.dropdown-menu {
      display: none;
    }
  }

  .site-name {
    color: $nobel-300;
    font-size: $base-font-site;
    line-height: 1;
    padding-top: 15px;
    padding-bottom: 15px;
    text-decoration: none;
  }

  .site-nav {
    display: flex;
    padding-left: 32px;
    float: left;
    height: 100%;

    > li {
      margin-bottom: 5px;
      margin-right: 2px;
      border-bottom: 1px solid $sky-blue-500;
      transition: $base-transition-background;

      .arrow {
        width: 14px;
        height: 14px;
        margin-left: 8px;
        margin-right: 16px;

        &.up {
          display: none;
        }
      }

      div {
        height: 100%;
      }

      .dropdown-menu {
        background-color: $tundra-500;
        position: absolute;
        width: max-content;
        min-width: 200px;
        max-width: 300px;
        box-shadow: $base-elevation-menu;
        padding: 2px 2px 0 2px;
        box-sizing: border-box;

        .nav-link {
          padding: $base-spacing-half $base-spacing;
          line-height: 1.5;
          font-weight: 400;
          flex-grow: 100; // take up remaining space from arrow
        }

        li {
          margin-bottom: 2px;
          transition: $base-transition-background;

          .dropdown-menu-tertiary {
            display: none;
            background-color: $tundra-500;
            position: absolute;
            top: -2px;
            left: calc(100% - 2px);
            width: max-content;
            min-width: 200px;
            max-width: 300px;
            box-shadow: $base-elevation-menu;
            padding: 2px 2px 0 2px;
          }
        }

        li:hover {
          background-color: $boulder-400;

          .dropdown-menu-tertiary {
            display: block;
          }
        }

        li.active {
          background-color: $sky-blue-500;
        }

        .arrow {
          width: 14px;
          height: 14px;
          margin-left: 8px;
          margin-right: 16px;

          &.up {
            display: none;
          }

          &.down {
            display: none;
          }

          &.left {
            display: none;
          }
        }
      }

      .nav-link {
        padding: 16px 0 12px 16px;
        font-size: $base-font-header;
        font-weight: 500;
        letter-spacing: 0.5px;
        line-height: 1;
        flex-grow: 100;

        &.without-arrow {
          padding-right: 16px;
        }

        &:only-child {
          padding-right: 16px;
        }
      }
    }

    > li:hover {
      background-color: $tundra-500;

      .up {
        display: block;
      }

      .down {
        display: none;
      }

      .dropdown-menu {
        display: block;
      }
    }

    > li.active {
      background-color: $sky-blue-500;
    }
  }
}

.desktop-view {
  nav {
    z-index: 1; // set index to display menu on top of cover image
  }

  .global-header nav {
    z-index: 2; // global menu will always be displayed on top of site menu
  }
}

.mobile-view {
  .global-header {
    .brand {
      padding-top: $base-spacing-1-half;
      padding-bottom: $base-spacing-1-half;
    }

    .search-toggle {
      padding: 22px 24px;
    }

    .menu-toggle {
      z-index: 1;

      .menu-toggle-icon.hide {
        display: none;
      }

      .menu-close-icon.hide {
        display: none;
      }
    }

    .search-nav {
      margin-right: 39px;
    }
  }

  .site-sidebar {
    right: -60%;
    width: 60%;
    position: fixed;
    top: 68px;
    z-index: 1;
    background: $base-black;
    overflow-y: scroll;
    transition: right ease-out 0.3s;
    height: calc(100% - 68px);

    .site-name {
      padding: $base-spacing;
      margin-bottom: 2px;
      border-bottom: 1px solid $nobel-300;
    }

    .site-nav {
      padding: 0;
      width: 100%;

      li {
        border-bottom: none;
        padding-left: $base-spacing-1-4th;
        margin-right: 0;
        margin-bottom: 2px;

        > div > .nav-link {
          padding: 16px 0 16px 12px;
        }

        // pushed menu content down on mobile
        .dropdown-menu {
          position: relative;
          min-width: unset;
          max-width: unset;
          width: unset;
          margin-top: 2px;
          padding: 0;

          li {
            padding-left: 0;

            .nav-link {
              padding: 12px 16px;
            }
          }

          li:hover .dropdown-menu-tertiary {
            position: relative;
            max-width: unset;
            width: unset;
            left: 0;
            border-bottom: 1px solid $boulder-400;
            box-shadow: unset;

            .nav-link {
              padding: 12px 24px;
            }
          }

          .arrow {
            &.up {
              display: none;
            }

            &.down {
              display: block;
            }

            &.left {
              display: none;
            }

            &.right {
              display: none;
            }
          }

          li:hover {
            .up {
              display: block;
            }

            .down {
              display: none;
            }
          }
        }
      }

      li:hover {
        background: unset;

        > div {
          background: $tundra-500;
          border-left: 1px solid $tundra-500;

          .nav-link {
            border-left: none;
          }
        }

        .dropdown-menu li:hover > div {
          background: $boulder-400;
          border-left: none;
        }
      }

      > li {
        > div .nav-link {
          border-left: 1px solid $sky-blue-500;
        }
      }
    }

    .global-nav,
    .utility-nav {
      background: $base-black;
      padding: 0;
      width: 100%;

      > li {
        margin-top: $base-spacing-1-8th;
        width: 100% !important;

        .nav-link {
          padding: $base-spacing;
        }

        .dropdown-menu {
          min-width: unset;
          max-width: unset;
          width: unset;

          li {
            margin-top: 0;
            border-left: none;
            width: 100%;
          }

          .nav-link {
            padding: 12px 16px;
          }
        }

        &:hover {
          background-color: unset;

          > div {
            background-color: $baltic-sea-600;
          }

          .dropdown-menu {
            position: relative;
            display: flex;
            flex-direction: column;
            margin-top: 2px;
          }
        }
      }
    }

    .global-site-name {
      color: $nobel-300;
      font-size: $base-font-site;
      line-height: 1;
      padding: $base-spacing-1-half $base-spacing;
      border-bottom: 1px solid $nobel-300;
      margin-bottom: $base-spacing-1-8th;
    }

    .global-nav {
      padding: 0;
      width: 100%;

      li {
        margin-bottom: $base-spacing-1-8th;

        > div > .nav-link {
          padding: $base-spacing;
        }
      }
    }
  }

  .site-sidebar.show {
    right: 0;
  }

  .mobile-search {
    height: 0;
    background-color: $base-black;
    transition: height ease-out 0.3s;

    .container {
      height: 100%;
    }

    .search-nav {
      top: unset;
      position: relative;
      width: 100%;
      margin-right: 0;

      input {
        width: 100%;
      }
    }
  }

  .mobile-search.show {
    height: 64px;
  }
}

.menu-active .mobile-view .site-sidebar {
  display: block;
}

@media only screen and (max-width: map-get($base-breakpoints, 'md')) {
  .mobile-view .site-sidebar {
    right: -90%;
    width: 90%;
  }
}

@media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
  .desktop-view {
    display: none;
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'lg') + 1) {
  .mobile-view {
    display: none;
  }
}