// =============================================================================
// navigations.scss
// ========================================================================== */
.footer-nav {
  border-top: 1px solid $gray-darker;
  width: 100%;
  &-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: $footer-nav-padding-y $footer-nav-padding-x;
    width: 100%;
    @include media-breakpoint-only(md) {
      flex-wrap: wrap;
      padding-bottom: $footer-nav-padding-y - 1.75rem;
    }
    @include media-breakpoint-down(sm) {
      display: block;
    }
  }
  &-item {
    margin: 0;
    @include media-breakpoint-down(md) {
      margin-bottom: 1.75rem;
      text-align: center;
      width: 25%;
    }
    @include media-breakpoint-down(sm) {
      width: 100%;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &-link {
    color: $footer-nav-color;
    font-family: $font-family-secondary;
    font-size: $font-size-sm;
    letter-spacing: .05em;
    padding: $footer-nav-item-padding-y $footer-nav-item-padding-x;
    text-transform: uppercase;
    @include hover-focus-active {
      color: $footer-nav-color-hover;
    }
  }
}

.main-nav,
.meta-nav {
  font-family: $font-family-secondary;
  position: relative;
  &-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: $main-nav-padding-y $main-nav-padding-x;
  }
  &-item {
    list-style-image: none;
    margin: 0;
    padding: 0;
    position: relative;
    &:before {
      display: none;
    }
  }
  &-link {
    color: $main-nav-color;
    display: block;
    font-weight: bold;
    letter-spacing: .05em;
    position: relative;
    text-transform: uppercase;
    z-index: 3;
    @include hover-focus-active {
      color: $main-nav-color-hover;
    }
  }
}

.main-nav {
  z-index: 10;
  &-item {
    &:not(:last-child) {
      margin-right: 1.5rem;
      @include media-breakpoint-only(xl) {
        margin-right: .25rem;
      }
      @include media-breakpoint-down(lg) {
        margin-right: .75rem;
      }
      @include media-breakpoint-down(md) {
        margin-right: .5rem;
      }
    }
    &.active {
      & > .main-nav-link {
        color: $main-nav-color-hover;
      }
    }
    &.sub {
      @include hover-focus {
        & > .main-nav-link {
          color: $main-nav-color-hover;
        }
      }
    }
  }
  &-link {
    padding: $main-nav-item-padding-y $main-nav-item-padding-x;
    @include media-breakpoint-only(xl) {
      font-size: .875rem;
    }
    @include media-breakpoint-down(md) {
      padding: 1rem .375rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: $font-size-lg;
    }
  }
  &-list {
    @include media-breakpoint-down(sm) {
      display: block;
    }
  }
  &-submenu {
    border-left: .25rem solid $black;
    display: none;
    font-family: $font-family-primary;
    left: -.25rem;
    min-width: 100%;
    min-width: calc(100% + 2rem); // sass-lint:disable-line no-duplicate-properties
    padding-right: 1rem;
    position: absolute;
    top: 0;
    z-index: 1;
    &:before {
      /* prevent items overflowing with main item when submenu is sliding  */
      background: $main-nav-submenu-bg;
      content: "" !important;
      height: 3.5rem;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
    }
    &-item {
      margin-right: 0;
      list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    }
    &-link {
      font-size: $font-size-sm;
      font-weight: normal;
      padding-bottom: .625rem;
      padding-top: .625rem;
      white-space: nowrap;
    }
    &-list {
      background: $main-nav-submenu-bg;
      box-shadow: 4px 4px 1px 0 rgba(0, 0, 0, .25);
      margin-top: 3.5rem;
    }
  }
  @include media-breakpoint-down(sm) {
    background: $white;
    bottom: 0;
    display: none;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    &:before {
      background: $white;
      content: "";
      left: 0;
      padding-bottom: (109px - 16px);
      position: absolute;
      right: 0;
      top: 0;
      z-index: 11;
    }
    &-list {
      bottom: 0;
      left: 0;
      overflow: auto;
      padding: (109px - 16px) 1.5rem 5rem;
      position: absolute;
      top: 0;
      width: 100%;
    }
    &-submenu {
      border-left-color: $brand-primary;
      display: block !important;
      height: auto !important;
      margin-bottom: 1rem !important;
      margin-left: 1.125rem;
      position: static;
      &-item {
        &:not(:last-child) {
          margin-bottom: 2rem;
        }
      }
      &-link {
        font-size: .875rem;
        padding: 0 .75rem;
      }
      &-list {
        box-shadow: none;
        margin-top: 0;
      }
    }
  }
  @include media-breakpoint-down(xs) {
    &-list {
      padding-top: 20%;
    }
    &:before {
      padding-bottom: 20%;
    }
  }
}

.meta-nav {
  height: 1.0625rem;
  margin: 1.5625rem .75rem .25rem;
  z-index: 11;
  @include media-breakpoint-down(md) {
    margin-left: .375rem;
    margin-right: .375rem;
  }
  @include media-breakpoint-down(sm) {
    margin: 0;
  }
  &-item {
    vertical-align: top;
    z-index: 12;
    &:not(:last-child) {
      margin-right: 0;
    }
    @include media-breakpoint-down(sm) {
      &:not(:last-child) {
        margin-right: 1rem;
      }
      &--hidden-mobile {
        display: none;
      }
    }
  }
  &-link {
    color: $gray;
    font-size: $font-size-xs;
    font-weight: normal;
    padding: 0;
  }
  .icon {
    font-size: 1rem;
  }

  $selector: #{&};
  @at-root {
    body.main-nav-open {
      @include media-breakpoint-down(sm) {
        #{$selector} {
          left: 25%;
          position: absolute;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }
  }
}

.lang-nav {
  background: $main-nav-submenu-bg;
  border-left: .125rem solid transparent;
  box-shadow: 2px 2px 1px 0 transparent;
  color: $gray;
  cursor: pointer;
  font-family: $font-family-secondary;
  font-size: .75rem;
  height: 1.0625rem;
  letter-spacing: .05em;
  overflow: hidden;
  padding-left: .375rem;
  padding-right: 1.75rem;
  position: relative;
  text-transform: uppercase;
  transition: all .4s;
  &:after {
    content: "";
    position: absolute;
    right: .5rem;
    top: .4375rem;
    width: 0;
    height: 0;
    transform: rotate(0deg);
    transition: all .4s;
    border-style: solid;
    border-width: 6px 4px 0;
    border-color: $gray transparent transparent;
    @include media-breakpoint-down(xs) {
      left: 0;
      right: auto;
      top: .375rem;
    }
  }
  &.active {
    border-left-color: $black;
    box-shadow: 2px 2px 1px 0 rgba($black, .25);
    &:after {
      transform: rotate(180deg);
    }
  }
  &-list {
    display: block;
    margin: 0;
    li {
      margin-bottom: 0;
    }
  }
  @include media-breakpoint-down(xs) {
    padding-left: 1rem;
    padding-right: 0;
  }
}

.theme-nav {
  margin-left: -($grid-gutter-width-base / 2);
  margin-right: -($grid-gutter-width-base / 2);
  padding-left: $grid-gutter-width-base / 2;
  padding-right: $grid-gutter-width-base / 2;
  position: relative;
  @include media-breakpoint-up(xl) {
    z-index: 12;
  }
  @include media-breakpoint-between(sm, lg) {
    margin-left: 0;
    margin-right: 0;
  }
  @include media-breakpoint-down(lg) {
    border-bottom: 1px solid $gray-light;
    border-top: 1px solid $gray-light;
    padding-bottom: 0;
    padding-top: 0;
  }
  &-circles-list {
    display: flex;
    margin: 0 auto 0 0;
    &-item {
      border: 1px solid;
      border-radius: 50%;
      display: block;
      height: .6875rem;
      padding: 0;
      margin: 0 .1875rem 0 0;
      width: .6875rem;
      @each $theme in map-keys($color-scheme) {
        &.theme-#{$theme} {
          border-color: map-get($color-scheme, $theme);
        }
      }
      &:before {
        content: none;
      }
    }
  }
  &-collapse {
    @include media-breakpoint-down(lg) {
      height: 0;
      margin: 0;
      overflow: hidden;
      padding: 0;
      &.show {
        height: auto;
      }
    }
  }
  &-label {
    color: $gray-light;
    font-family: $font-family-secondary;
    font-size: $font-size-xs;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  &-list {
    display: flex;
    margin-bottom: 0;
    @include media-breakpoint-down(lg) {
      padding-top: 3rem;
    }
    @include media-breakpoint-down(xs) {
      padding-top: 1rem;
    }
    &-item {
      display: block;
      height: 3rem;
      margin-bottom: 0;
      margin-left: -.4375rem;
      position: relative;
      width: 3rem;
      z-index: 1;
      @include hover-focus-active {
        z-index: 2;
        .theme-nav-list-item-link {
          transform: scale(1.35);
          @include media-breakpoint-down(lg) {
            transform: scale(1.1);
          }
          .icon {
            color: $white;
            transform: translate(-50%, -50%) scale(.8335);
            @include media-breakpoint-down(md) {
              transform: translate(-50%, -50%) scale(1);
            }
          }
        }
      }
      @include hover-focus {
        z-index: 3;
      }
      @include media-breakpoint-down(lg) {
        height: 2rem;
        margin: 0;
        width: 2rem;
        top: -.5rem;
      }
      @include media-breakpoint-only(sm) {
        margin-left: 2rem;
        margin-right: 2rem;
      }
      &-label {
        color: $gray-light;
        font-family: Montserrat,Helvetica,Arial,sans-serif;
        font-size: .625rem;
        left: 50%;
        letter-spacing: .05em;
        line-height: 1.2;
        margin-top: .5rem;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        top: 100%;
        transform: translateX(-50%);
        width: 5.5rem;
      }
      &-link {
        background: $gray-lighter;
        border: 1px solid $white;
        border-radius: 50%;
        display: block;
        font-size: 1.75rem;
        height: inherit;
        position: relative;
        transform: scale(1);
        transition: all .2s;
        width: inherit;
        @include media-breakpoint-down(lg) {
          font-size: 2.25rem;
        }
        .icon {
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%) scale(1);
        }
      }

      @include media-breakpoint-up(md) {
        &--hidden-desktop {
          display: none;
        }
      }
    }
  }
  &-mobile {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  &-toggler {
    color: $link-color;
    font-size: $font-size-xs;
    margin-right: -($grid-gutter-width-base / 2);
    padding: 1rem;
  }
}