@import "variables";
@import "mixins";

$fs-header-li: 1.4rem !default;
$fw-header: 700 !default;
$header-pd: 2.6rem 0 !default;
$header-tt: uppercase !default;
$sticky-header-pd: 0.6rem 0 !default;
$fs-cart-count: 1.2rem !default;
//active-item
$header-item-pd: (1rem * 1.6) !default;
$header-item-a-pd: unset !default;
$header-item-bb: none !default;
$header-item-active-bb: none !default;
$header-item-active-col: $col-prm !default;
$header-item-active-fw: unset !default;
$header-item-active-bb: none !default;

#header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  .header {
    padding: $header-pd;
    left: 0;
    width: 100%;
    background: $header-bg;
    transition: $trans;
    &.sticky-header {
      padding: $sticky-header-pd;
      transition: $trans-h;
      box-shadow: rgba(149, 157, 165, 0.2) 0 0.8rem 2.4rem;
      .mobile-menu.active {
        height: calc(100vh - var(--header-height));
      }
    }
    .row {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      align-content: center;
      justify-content: center;
      margin: 0;
    }
    .logo {
      flex: 1 0 20%;
      max-width: 20%;
      @include bp("lg") {
        flex: 1 0 45%;
        max-width: 45%;
      }
      > a {
        content: url(theme-url("/assets/svg/logo.svg"));
        max-width: 22rem;
        @include bp("lg") {
          max-height: fit-content;
        }
      }
    }
    .custom-logo {
      flex: 1 0 20%;
      max-width: 20%;
      a {
        font-size: 0;
      }
      @include bp("lg") {
        flex: 1 0 45%;
        max-width: 45%;
      }
      img {
        width: auto !important;
        max-height: 60px;
      }
    }
    .top-menu {
      flex: 1 0;
      max-width: 70%;
      @include bp("lg") {
        display: none;
      }
      > div {
        > ul.menu {
          display: flex;
          list-style: none;
          padding: 0;
          justify-content: center;
          margin: 0 auto;
          align-items: center;
          align-content: center;
          flex-wrap: wrap;
          flex-direction: row;
          li.menu-item {
            position: relative;
            padding: $header-item-pd;
            a {
              color: $header-color;
              text-decoration: none;
              font-size: $fs-header-li;
              font-weight: $fw-header;
              text-transform: $header-tt;
              border-bottom: $header-item-bb;
              padding: $header-item-a-pd;
              &:hover {
                color: $header-item-active-col;
                font-weight: $header-item-active-fw;
                border-bottom: $header-item-active-bb;
              }
            }
            cursor: pointer;
            .sub-menu {
              display: none;
              position: absolute;
              padding: 0;
              list-style: none;
              background: $header-bg;
              width: max-content;
              padding: (1rem * 1.6);
              box-shadow: rgba(149, 157, 165, 0.2) 0 0.8rem 2.4rem;
              z-index: 100;
              > li {
                padding: (0.5rem * 1.6) 0;
              }
            }
            &.menu-item-has-children {
              position: relative;
              i {
                transition: 0.3s;
                position: absolute;
                top: 50%;
                padding: (1rem * 1.6) 0;
                cursor: pointer;
                width: 1.6rem;
                line-height: 1.6rem;
                transform: translate(50%, -50%);
                transform-origin: center;
                right: 0;
                svg {
                  path {
                    stroke: $header-color;
                  }
                }
              }
              &.active {
                i {
                  transform: scaleY(-1) translate(50%, 50%);
                  transform-origin: 0px calc(50% - 1px);
                  transition: 0.4s;
                }
              }
            }
            &.current-menu-item a {
              color: $header-item-active-col;
              font-weight: $header-item-active-fw;
              border-bottom: $header-item-active-bb;
            }
          }
        }
      }
    }
    .right-navigation {
      flex: 1 0 20%;
      max-width: 20%;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      @include bp("lg") {
        flex: 1 0 55%;
        max-width: 55%;
      }
      .menu-cart {
        position: relative;
        margin-left: (1rem * 1.6);
        .cart-count-badge {
          .badge {
            position: absolute;
            right: 0;
            top: 0;
            background: $col-prm;
            width: 2rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border-radius: 50%;
            transform: translate(50%, -60%);
            font-size: $fs-cart-count;
            font-weight: $fw-bold;
            color: $col-prm-c;
          }
        }
      }
      .trigger-mobile-menu {
        cursor: pointer;
        display: none;
        margin-left: (1rem * 1.6);
        .svg-menu-toggle {
          transform: translate(0.5rem, -0.3rem);
        }
        .bar {
          transform: rotate(0);
          opacity: 1;

          -webkit-transition: -webkit-transform 0.4s ease-in-out,
            opacity 0.2s ease-in-out;
          transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        }
        .bar:nth-of-type(1) {
          transform-origin: 20px 10px;
        }
        .bar:nth-of-type(3) {
          transform-origin: 20px 20px;
        }
        @include bp("lg") {
          display: block;
        }
        &.active {
          .bar:nth-of-type(1) {
            transform: rotate(-45deg);
          }

          .bar:nth-of-type(2) {
            opacity: 0;
          }

          .bar:nth-of-type(3) {
            transform: rotate(45deg);
          }
        }
      }
    }
  }
}

.mobile-menu {
  opacity: 0;
  pointer-events: none;
  height: 0px;
  display: block;
  transition: opacity 0.3s ease-in, height 0.4s ease-in;
  a {
    color: $col-prm-c;
    text-decoration: none;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      a {
        display: block;
        padding: (1rem * 1.6);
        border-bottom: 1px solid $col-prm-l;
      }
    }
  }
  &.active {
    display: block;
    opacity: 1;
    background: $col-prm;
    pointer-events: inherit;
    height: calc(100vh - 10.4rem);
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    top: var(--header-height);
    width: 100%;
    z-index: 100;
    transition: opacity 0.4s ease-out, height 0.5s ease-out;
    @include bp("lg-up") {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease-out, height 0.4s ease-out;
    }
  }
  .menu-item-has-children {
    position: relative;
    .sub-menu {
      display: none;
      background: $col-prm-c;
      a,
      i {
        color: $col-prm;
        svg {
          path {
            stroke: $header-color;
          }
        }
      }
    }
    i {
      position: absolute;
      right: 0;
      top: 0;
      padding: (1rem * 1.6) (1rem * 1.6);
      cursor: pointer;
      svg {
        width: 1.6rem;
        path {
          stroke: $col-prm-c;
        }
      }
      &.hide {
        transform: scaleY(-1) translate(0, 0);
        transform-origin: center;
        transition: 0.4s;
      }
    }
  }
}
body {
  &.mobile-menu-active {
    overflow: hidden;
  }
  &.popup-opened {
    overflow: hidden;
  }
}

.popup {
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
  transition: 0.4s;
  &.active {
    display: block;
    position: fixed;
    z-index: 999;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: $popup-overlay;
    transition: 0.3s;
    opacity: 1;
    z-index: 999;
  }
  .wrp {
    overflow-x: hidden;
    box-shadow: 0 3px 1.5rem #00000029;
    width: 60rem;
    max-width: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: $col-bg;
    max-height: 90%;
    @include bp("lg") {
      max-height: 90%;
    }
    div.close-btn {
      position: absolute;
      top: 0;
      right: 0;
      background-color: $col-bg;
      cursor: pointer;
      display: block;
      border: 1px solid $gray800;
      padding: (1rem * 1.6);
      line-height: 0.8;
      transition: 0.4s;
      z-index: 10;
      &:hover {
        background-color: $col-prm;
        transition: 0.3s;
      }
    }
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }
}

#search {
  opacity: 0;
  position: fixed;
  right: 0;
  transform: translate(100%, 0);
  transition: 0.3s;
  top: var(--header-height);
  width: 603px;
  max-width: 100%;
  z-index: 100;
  height: calc(100vh - #{var(--header-height)});
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 999;
  background: $white;
  border-top: 10px solid $col-prm;
  margin-bottom: 4rem;
  .search-wrapper {
    background: $white;
    padding-top: 15px;
  }
  @include bp("md") {
    top: 70px;
    height: calc(100vh - 70px);
  }
  .product-info {
    .title {
      font-weight: $fw-bold;
    }
    .description {
      color: $black;
    }
  }
  &.active {
    opacity: 1;
    transform: translate(0, 0);
    transition: 0.4s;
  }
  #search-close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: $gray100;
    cursor: pointer;
    display: block;
    border: 1px solid $gray300;
    padding: 1rem;
    line-height: 0.8;
    transition: 0.4s;
    z-index: 999;
    display: none;
    &:hover {
      background-color: $col-bg;
      transition: 0.3s;
    }
    @include bp("md") {
      display: block;
    }
  }
  .product-search {
    padding: 0.5rem 0rem;
    @include bp("md") {
      padding: 0;
    }
  }
  .product-search-results-content {
    border: none;
    display: block !important;
  }
  .search-results {
    .s_product_cat {
      text-align: center;
      a {
        color: $white;
        background: $black;
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 1rem;
      }
      span {
        text-decoration: none;
      }
      &:hover {
        background: $black !important;
        a {
          color: $col-prm;
        }
      }
    }
    a {
      text-decoration: none !important;
    }
  }
  .entry {
    transition: 0.3s;
  }
  .product-search-results .entry:hover,
  .product-search-results .entry.active {
    transition: 0.4s;
    background-color: $gray100;
  }
  .product-search-form {
    width: calc(100% - 2rem);
    background: $white;
    margin: 0 auto;
  }
  .product-search-form form input {
    padding: 1rem 2rem;
    margin: 0;
    border-radius: 0px !important;
    border: none;
    color: $black;
    outline: none;
    background: transparent;
    @include bp("md") {
      padding: 4.8rem 2.4rem;
      margin: 0;
    }
    &::placeholder {
      color: $black;
    }
  }
  div.product-search-form span.product-search-field-clear {
    top: -0.5rem;
    right: 16px;
    color: $black;
  }
  .product-search-field {
    border: 1px solid $gray300;
    padding: 1rem;
  }
}
