/*header*/
.header-top-nav {
  background: $brand-grey-light;
  margin-bottom: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.dropdown-menu {
  padding: 0;
  border: none;
  @media (min-width: $grid-float-breakpoint) {
    opacity: 0;
    border-bottom-right-radius: $border-radius-large;
    border-bottom-left-radius: $border-radius-large;
    box-shadow: 0 8px 12px rgba(0, 0, 0, .175);
  }
  .icon-anyfill-ui-chevron-right {
    height: 12px;
    width: 12px;
    margin-left: auto;
  }
  ul {
    border-left: 1px solid $colorBordes;
    border-right: 1px solid $colorBordes;
    @media (max-width: $grid-float-breakpoint-max) {
      border-bottom: 1px solid $colorBordes;
    }
    li {
      border-bottom: 1px solid $colorBordes;
      position: relative;
      &:last-child {
        border-bottom: none
      }
      > a,
      > button {
        border: 0;
        background: transparent;
        color: $brand-grey-dark;
        width: 100%;
        padding-left: 15px;
        height: $navbar-height;
        line-height: $navbar-height;
        display: flex;
        align-items: center;
        text-transform: uppercase;
        &:hover, &:focus {
          color: $brand-grey-dark;
          text-decoration: none;
          background-color: $brand-primary-light;
          outline: none;
        }
      }
    }
  }
}

/*rtl:ignore*/
[dir='rtl'] .dropdown-menu .icon-anyfill-ui-chevron-right {
  transform: rotateY(180deg);
}

.open .dropdown-menu,
.open .dropdown-submenu{
  @media (min-width: $grid-float-breakpoint) {
    animation-duration: $transition-time;
    animation-name: fadeInFromNone;
    opacity: 1;
  }
  height: auto;
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
}

.header-bottom-nav {
  background: #FFFFFF;
  margin-bottom: 0;
  .navbar-main {
    > li + li {
      margin: 0;
    }
  }
  .menu_link {
    cursor: pointer;
    height: $navbar-height;
    padding: 0 15px;
    line-height: $navbar-height;
    color: $brand-grey-dark;
    border-radius: 0;
    background: transparent;
    border: 0;
    text-transform: uppercase;
    svg, svg * {
      width: 12px;
      height: 12px;
      margin-left: 5px;
    }
    &:hover, &:focus {
      color: $brand-grey-dark;
      border-bottom: 2px solid $brand-primary;
      outline: 0;
    }
  }
  li.active a {
    &, &:hover, &:focus {
      color: $brand-grey-dark;
      background-color: transparent;
      border-bottom: 2px solid $brand-primary;
    }
  }
}

@media (min-width: $grid-float-breakpoint) {
  .header-bottom-nav {
    &:before {
      content: '';
      position: absolute;
      bottom: 2px;
      width: 100%;
      height: 1px;
      left: 0;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
      z-index: 0;
      margin-bottom: 0;
    }
    .menu_link {
      &:hover, &:focus {
        background: $brand-primary-light;
      }
    }
  }
}

.navbar-nav > li > .dropdownmenu-main-more, .header-bottom-nav .navbar-nav > li > .dropdown-menu {
  border-top: 2px solid $brand-primary;
  margin-top: -2px;
}

.dropdownmenu-main-more {
  min-width: 215px;
}

.navbar-main > li.open > div:focus {
  border: 0
}

.login, .help_olt, .contact {
  &__link {
    padding: 15px;
  }
  .menu_link {
    padding: 0 5px 0 15px;
    line-height: 50px;
  }
  .icon-anyfill-graph-user {
    width: 12px;
    height: 12px;
  }
  .icon-anyfill-graph-contact-queries,
  .icon-anyfill-graph-help,
  .icon-anyfill-graph-email {
    width: 18px;
    height: 18px;
  }
  svg, svg * {
    vertical-align: middle;
    margin-right: 5px;
  }
  a {
    color: $brand-grey-dark;
  }
  > a:first-child {
    @include medium-weight;
  }
}

.language_selector,
.login,
.help_olt {
  .dropdown-menu {
    border-left: 1px solid $colorBordes;
    border-right: 1px solid $colorBordes;
    width: 221px;
    li {
      border-bottom: 1px solid $colorBordes;
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .icon-anyfill-ui-chevron-down {
    width: 12px;
    height: 12px;
    margin-left: 5px;
  }
}

.nav .open > a {
  &,
  &:hover,
  &:focus {
    background-color: #FFFFFF;
    border-color: $colorBordes;
  }
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  border-radius: 0 6px 6px 6px;
  ul > li > a,
  ul > li > button {
    background: $brand-grey-light;
    &:hover, &:focus {
      background-color: $brand-primary-light;
    }
  }
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.breadcrumb {
  padding: 10px 0;
  margin-bottom: 0;
  li {
    display: inline-block;
  }
  li+li:before {
    padding: 0 5px;
    color: $brand-grey-dark;
    content: "> ";
  }
  a {
    color: $brand-grey-dark;
  }
  .active {
    @include medium-weight;
  }
}

.currency_selector  {
  .dropdown-toggle {
    background: transparent;
    border: 0;
    padding: 14px 15px 12px;
    &:hover {
      background-color: #eeeeee;
    }
  }
  .currentCurrencySymbol {
    @include medium-weight;
    font-size: 16px;
  }
  svg, svg * {
    width: 12px;
    height: 12px;
  }
}

.dropdown-currency {
  width: 870px;
  li {
    border-right: 1px solid $brand-grey-medium;
    width: 25%;
    float: left;
    right: -1px;
  }
  ul > li > button {
    background: #FFFFFF;
    text-align: left;
    display: inline-block;
    text-transform: initial;
  }
  .active-element {
    position: relative;
    @include medium-weight;
    &:after {
      position: absolute;
      right: 15px;
      top: 50%;
      margin-top: -7px;
    }
  }
  .checked:after {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-check-027a02.svg'), none;
    background-repeat: no-repeat;
    background-size:100% 100%;
  }
  .element-symbol {
    @include medium-weight;
    color: $brand-primary;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}