@import 'variables', 'mixin';

/**
 * Table of Contents:

 * 1.0 - before-header
 * 2.0 - site-header
 * 3.0 - navbar
	* 3.1 - navbar-brand
	* 3.2 - navbar-nav
		* 3.2.1 - navbar-nav__menu
		* 3.2.2 - nav-item lvl 1
		* 3.2.3 - dropdown-menu
		* 3.2.4 - nav-item lvl 2
		* 3.2.5 - nav-item lvl n
	* 3.3 - navbar-btns
	* 3.4 - navbar-btn
		* 3.4.1 - navbar-btn__wrap
		* 3.4.2 - navbar-btn__content
		* 3.4.3 - navbar-btn__menu
	* 3.5 - navbar-overlay
 * 4.0 - navbar-nav-mobile
	* 4.1 - navbar-nav__menu
	* 4.2 - nav-item lvl 1
	* 4.3 - dropdown-menu
	* 4.4 - nav-item lvl n
*/


/* 1.0 - before-header */
.before-header {}

#nav-item-942903{
	a{
		width: 100%;
	}
}

/* 2.0 - site-header */
.site-header {
      position: $header-position;
      background: $header-background;
      z-index: 50;
      right: 0;
      left: 0;
      border-bottom: 1px solid rgba(#000, 20%);
      margin-bottom: 20px;

      @include media-max(1200px) {
            margin-bottom: 0;
      }

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

      .sticky-area {
            background: $header-background;

            &.sticky {
                  position: fixed;
                  z-index: 999;
                  width: 100%;
                  margin: 0 auto;
                  top: -$header-height;
                  @include css3(transition, (top .6s $transition-timing-function, box-shadow $transition));

                  &.pinned {
                        top: 0;
                        @include css3(box-shadow, 0 2px 4px 0 rgba(50, 50, 50, .15));
                  }
            }

            &.no-transition {
                  @include css3(transition, 0s);
            }
      }
}


/* navbar */
.navbar {
      flex-wrap: nowrap;
      padding: 0;
      height: $header-height;

      @include media-max($navbar-mobile-on) {
            height: $header-mobile-height;
      }

      /* 3.1 - navbar-brand */
      &-brand {
            font-size: 0;
            display: inline-block;
            margin: 0;
            padding: $logo-padding;
            transition: $transition;
			width: 70px;

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

            @include media-max($navbar-mobile-on) {
                  height: $header-mobile-height;
                  padding: $logo-mobile-padding;
            }

            &__image {
                  width: auto;
                  object-fit: contain;

                  @include media-max($navbar-mobile-on) {
                        height: 100%;
                  }
            }
      }


      /* 3.2 - navbar-nav */
      &-nav {
            flex-direction: row;
            justify-content: $navbar-justify-content;
            flex-grow: 1;
            margin-left: 20px;

            @include media-max(1200px) {
                  margin-left: 0;
            }

            @include media-max($navbar-mobile-on) {
                  flex-grow: 0;
            }


            /* 3.2.1 - navbar-nav__menu */
            &__menu {
                  display: flex;


                  /* 3.2.2 - nav-item lvl 1 */
                  .nav-item {
                        margin: $nav-link-margin;

                        .nav-link {
                              font-family: $nav-link-font-family;
                              font-size: $nav-link-font-size;
                              font-weight: $nav-link-font-weight;
                              line-height: $nav-link-line-height;
                              margin: $nav-link-padding;
                              letter-spacing: $nav-link-letter-spacing;
                              text-transform: $nav-link-text-transform;
                              color: $nav-link-color;
                              border-radius: $nav-link-border-radius;
                              background: $nav-link-background;
                              @include css3(transition, (color $transition, background $transition));

                              @include media-max(1200px) {
                                    margin: 15px 15px;
                                    font-size: 15px;
                              }

                              @include media-min(1200px) {
                                    position: relative;

                                    &:before {
                                          content: "";
                                          position: absolute;
                                          bottom: -28px;
                                          left: 0%;
                                          right: 100%;
                                          background: #000;
                                          height: 2px;
                                          transition: $transition;
                                    }
                              }

                              .svg-icon {
                                    display: inline-block;
                                    width: 14px;
                                    height: 14px;
                                    margin-left: 2px;
                                    text-align: center;

                                    &__path {
                                          @include css3(transition, (transform $transition, fill $transition));
                                          transform-origin: center;
                                    }
                              }
                        }

                        &.show,
                        &.active,
                        &.current-nav-item,
                        &.current-menu-item,
                        &.current-menu-parent,
                        &.current-menu-ancestor,
                        &.current_page_parent,
                        &.current-page-ancestor,
                        &:hover:not(.active) {
                              >.nav-link {
                                    color: $nav-link-color;
                                    background: $nav-link-background;
                                    position: relative;
                                    opacity: 1;

                                    @include media-min(lg) {
                                          &:before {
                                                right: 0%;
                                          }
                                    }
                              }
                        }

                        &.hide-on-desktop {
                              @include media-min($navbar-mobile-on) {
                                    display: none;
                              }
                        }


                        /* 3.2.3 - dropdown-menu */
                        .dropdown-menu {
                              position: absolute;
                              top: 100%;
                              left: -1000px;
                              display: block;
                              visibility: hidden;
                              min-width: 250px;
                              margin: 0;
                              padding: 20px;
                              transition-delay: .2s;
                              transform: translateY(25px);
                              opacity: 0;
                              border: 1px solid $dropdown-menu-border-color;
                              border-radius: 0;
                              background: $dropdown-menu-background;
                              border: 1px solid rgba(0, 0, 0, 0.2);

                              @include media-min(1200px) {
                                    box-shadow: 0 0 15px rgba(#000, 15%);
                              }

                              @media only screen and (min-width: 1200px) and (max-width: 1366px) {
                                    columns: 4 !important;
                              }

                              @media only screen and (min-width: 1367px) and (max-width: 1600px) {
                                    columns: 5 !important;
                              }

                              @media only screen and (min-width: 1601px) {
                                    columns: 7;
                              }


                              /* 3.2.4 - nav-item lvl 2 */
                              .nav-item {
                                    margin: 0;

                                    &:first-of-type {
                                          margin-top: -20px;
                                    }

                                    &:hover {
                                          .nav-link {
                                                font-weight: bold;
                                          }
                                    }

                                    .nav-link {
                                          padding: 0;
                                          text-transform: none;
                                          margin: 20px;
                                          padding: 0;
                                          background-image: unset;

                                          &:before {
                                                display: none;
                                          }

                                          .svg-icon {
                                                position: absolute;
                                                top: 50%;
                                                right: 15px;
                                                margin-top: -7px;
                                          }
                                    }
                              }
                        }

                        &:hover {
                              >.nav-link .svg-icon__path {
                                    transform: rotate(180deg);
                              }

                              >.dropdown-menu {
                                    left: $dropdown-menu-position-left;
                                    visibility: visible;
                                    transform: translateY(0);
                                    opacity: 1;
                                    @include css3(transition, (opacity $transition $transition-time, transform $transition $transition-time));
                              }
                        }

                        &.click {
                              >.dropdown-menu {
                                    display: none;
                                    visibility: visible;
                                    transform: none;
                                    opacity: 1;
                              }

                              &:hover>.nav-link .svg-icon__path {
                                    transform: none;
                              }

                              &.show {
                                    >.nav-link .svg-icon__path {
                                          transform: rotate(180deg);
                                    }

                                    >.dropdown-menu {
                                          left: 0;
                                          display: block;
                                    }
                              }
                        }

                        &:not(.click) {
                              .nav-link[href="#"] {
                                    pointer-events: none;

                                    .svg-icon {
                                          pointer-events: auto;
                                    }
                              }
                        }


                        /* 3.2.5 - nav-item lvl n */
                        .nav-item {
                              margin: 0;

                              .dropdown-menu {
                                    top: -21px;
                                    transform: translateX(25px);
                              }

                              &:hover>.dropdown-menu {
                                    left: 100%;
                                    transform: translateX(0);
                              }
                        }
                  }
            }
      }


      /* 3.3 - navbar-btns */
      &-btns {
            display: flex;
            justify-content: flex-end;
            order: 1;
            margin: $nav-link-margin;

            @include media-max($navbar-mobile-on) {
                  order: 0;
                  flex-grow: 1;
                  margin-left: 20px;
            }

            .navbar-btn__menu {
                  @include media-min($navbar-mobile-on) {
                        display: none;
                  }
            }
      }


      /* 3.4 - navbar-btn */
      &-btn {
            display: block;
            min-width: 40px;
            height: 40px;
            margin: $header-btn-margin;
            background: $header-btn-background;
            padding: 5px 10px;
            cursor: pointer;
            text-align: center;
            color: $header-btn-color;

            @include media-max($navbar-mobile-on) {
                  margin: 0;
            }

            &:after {
                  content: '';
                  @include absolute(100%, 0, auto, 0);
            }

            >span {
                  position: relative;
                  top: -1px;
                  font-family: $nav-link-font-family;
                  font-size: $nav-link-font-size;
                  font-weight: $nav-link-font-weight;
                  line-height: $nav-link-line-height;
                  letter-spacing: $nav-link-letter-spacing;
                  text-transform: uppercase;
                  @include css3(transition, $transition);

                  img {
                        max-height: 100%;
                  }
            }

            .svg-icon {
                  width: 20px;
                  @include css3(transition, $transition);
            }

            .count {
                  font-size: 12px;
                  font-weight: 400;
                  width: 18px;
                  line-height: 16px;
                  color: #000 !important;
                  background: #c7bdb3;
                  border: 1px solid #c7bdb3;
                  border-radius: 50%;
                  position: absolute;
                  top: 3px;
                  right: -3px;
                  bottom: auto;
                  left: auto;

                  &[data-count="0"] {
                        display: none;
                  }
            }

            /* 3.4.1 - navbar-btn__wrap */
            &__wrap {
                  position: relative;

                  &:hover {
                        .navbar-btn {
                              background: $header-btn-background-hover;
                              color: $header-btn-color-hover;

                              &:hover:after {
                                    height: #{(($header-height - 40px) / 2)};

                                    @include media-max($navbar-mobile-on) {
                                          height: #{(($header-mobile-height - 40px) / 2)};
                                    }
                              }

                              &__content {
                                    visibility: visible;
                                    transform: translateY(0);
                                    opacity: 1;

                                    @include css3(transition, (opacity $transition $transition-time, transform $transition $transition-time));
                              }
                        }
                  }
            }


            /* 3.4.2 - navbar-btn__content */
            &__content {
                  position: absolute;
                  top: calc(100% + #{(($header-height - 40px) / 2)});
                  right: 0;
                  display: block;
                  visibility: hidden;
                  min-width: 350px;
                  transition-delay: .2s;
                  transform: translateY(25px);
                  opacity: 0;
                  border-width: $btn-content-border-width;
                  border-style: solid;
                  border-color: $btn-content-border-color;
                  background: $btn-content-background;
                  color: $btn-content-color;

                  @include media-max($navbar-mobile-on) {
                        top: calc(100% + #{(($header-mobile-height - 40px) / 2)});
                  }

                  input[type='search'] {
                        border-color: transparent;
                        background: $btn-content-background;
                        color: $btn-content-color;
                        @include placeholder-color($btn-content-color);
                  }

                  &.mini-cart {
                        border: 1px solid #d7d7d7;
                        box-shadow: 0 0 15px rgba(#000, 15%);

                        .variation {
                              display: none;
                        }
                  }

                  &.search-products {
                        box-shadow: 0 0 15px rgba(#000, 15%);
                        position: absolute;
                        top: 0;
                        right: 50px;
                        display: block;
                        visibility: hidden;
                        min-width: 400px;
                        transition-delay: 0.2s;
                        transform: translateY(25px);
                        opacity: 0;
                        border-width: 0px;
                        border-style: solid;
                        border: 1px solid #d7d7d7;
                        background: #FFF;
                        color: #888888;
                        z-index: 1;
                  }

                  /* 3.4.2.1 - languages */
                  &.languages {
                        padding: 20px 0;
                        min-width: auto;

                        .lang {
                              &.current {
                                    opacity: .5;
                                    cursor: default;
                              }

                              &__box {
                                    padding: 10px 40px 10px 25px;
                                    display: flex;
                                    align-items: center;
                                    font-family: $nav-link-font-family;
                                    font-size: $nav-link-font-size;
                                    font-weight: $nav-link-font-weight;
                                    line-height: $nav-link-line-height;
                                    letter-spacing: $nav-link-letter-spacing;
                                    color: $nav-link-color;
                                    @include css3(transition, (color $transition, background $transition));

                                    &[href]:hover {
                                          color: $nav-link-color-hover;
                                    }
                              }

                              img {
                                    min-width: 32px;
                                    width: 32px;
                                    margin-right: 10px;
                                    border: 1px solid $btn-content-border-color;
                              }
                        }
                  }
            }


            /* 3.4.3 - navbar-btn__menu */
            &__menu {
                  position: relative;

                  span {
                        height: 2px;
                        border-radius: 1px;
                        background: $header-btn-color;
                        @include absolute(48%, 7px, auto, 7px);
                        @include css3(transition, $transition);
                        @include css3(transform, rotate(-45deg));

                        &:nth-child(1) {
                              @include css3(transform, rotate(45deg));
                        }
                  }

                  &.collapsed {
                        span {
                              @include css3(transform, rotate(0));

                              &:nth-child(1) {
                                    top: 10px;
                              }

                              &:nth-child(2) {
                                    top: 19px;
                              }

                              &:nth-child(3) {
                                    top: 28px;
                              }
                        }
                  }

                  &:hover {
                        >span {
                              background: $header-btn-color-hover;
                        }
                  }
            }
      }


      /* 3.5 - navbar-overlay */
      &-overlay {
            position: fixed;
            z-index: 98;
            top: 0;
            left: 0;
            display: flex;
            visibility: hidden;
            justify-content: flex-end;
            width: 100%;
            height: 100%;
            padding: 100px;
            content: '';
            opacity: 0;
            background: rgba(54, 54, 54, .6);
            @include css3(transition, $transition);

            @include media-max($navbar-mobile-on) {
                  padding: 50px 15px;
            }

            .navbar-btn {
                  @include css3(transition, $transition);

                  span {
                        background: #fff;
                  }

                  &:hover {
                        opacity: .75;
                  }
            }
      }

      &-btn:not(.collapsed) {
            +.navbar-overlay {
                  visibility: visible;
                  opacity: 1;

                  &[data-target*="__primary"] {
                        @include media-min($navbar-mobile-on) {
                              visibility: hidden;
                              opacity: 0;
                        }
                  }
            }
      }
}


/* 4.0 - navbar-nav-mobile */
@mixin navbar-nav-mobile {
      position: fixed;
      z-index: 99;
      top: 0;
      bottom: 0;
      left: -315px;
      display: block;
      overflow-y: auto;
      width: 315px;
      height: auto;
      background: $header-background;
      @include css3(transition, $transition);

      @include media-max(sm) {
            left: calc(-100% - 80px);
            width: calc(100% - 80px);
      }

      &.active {
            left: 0 !important;
      }


      /* 4.1 - navbar-nav__menu */
      .navbar-nav__menu {
            display: block;
            width: 100%;
            padding: 100px 20px 60px;

            @include media-max(sm) {
                  padding: 60px 20px;
            }


            /* 4.2 - nav-item lvl 1 */
            .nav-item {
                  margin: 0;
                  border-width: 1px 0 0;
                  border-style: solid;
                  border-color: $add-nav-link-border-color;

                  &:last-child {
                        border-width: 1px 0;
                  }

                  .nav-link {
                        position: relative;
                        padding: 15px 40px 15px 0 !important;
                        text-transform: none;
                        word-wrap: break-word;

                        .svg-icon {
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              width: 50px;
                              height: 50px;
                              margin: 0;
                              padding: 18px;
                              @include absolute(0, 0);
                        }
                  }

                  &:hover>.nav-link .svg-icon__path {
                        transform: none;
                  }

                  &.active>.nav-link .svg-icon__path {
                        transform: rotate(180deg);
                  }
            }


            /* 4.3 - dropdown-menu */
            .dropdown-menu {
                  position: static;
                  display: none;
                  visibility: visible;
                  min-width: auto;
                  transform: none !important;
                  opacity: 1;
                  padding: 0;
                  border-width: 0 0 0 1px;
                  border-style: dashed;
                  border-color: $add-nav-link-border-color;
                  @include css3(transition, 0s);

                  li {
                        a {
                              padding: 0;
                        }
                  }


                  /* 4.4 - nav-item lvl n */
                  .nav-item {
                        padding-left: 20px;

                        &:last-child {
                              border-width: 1px 0 0;
                        }

                        .nav-link {
                              .svg-icon {
                                    margin: 0;
                                    top: 0;
                                    right: 0;

                                    &__path {
                                          transform: rotate(90deg);
                                    }
                              }
                        }

                        &.active>.nav-link .svg-icon__path {
                              transform: rotate(270deg);
                        }
                  }
            }
      }
}

.navbar-nav {
      @include media-max($navbar-mobile-on) {
            @include navbar-nav-mobile;
      }

      &__additional {
            @include navbar-nav-mobile;

            .navbar-btn__menu {
                  display: block;
            }
      }
}