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

#header .header .logo,
#header .header .right-navigation {
  flex: 1 0 100px;
  max-width: 100px;
}
#header .header .logo {
  @include bp("lg") {
    flex: 1 0 35%;
    max-width: 35%;
  }
}
#header .header .right-navigation {
  @include bp("lg") {
    flex: 1 0 65%;
    max-width: 65%;
  }
}
#header .header .top-menu > div > ul.menu {
  > li {
    border-right: 1px solid $gray200;
    &:last-child {
      border-right: none;
    }
  }
}
#header .header .top-menu > div > ul.menu li.menu-item .sub-menu {
  transform: translate(-15px, 0);
  border-radius: 3px 3px 24px 24px;
}
#header .header .top-menu > div > ul.menu li.menu-item.menu-item-has-children i {
  transform: translate(-50%, calc(-50% + 2px));
}
#header .header .top-menu > div > ul.menu li.menu-item.menu-item-has-children.active i {
  transform: scaleY(-1) translate(-50%, 50%);
  transform-origin: 0px calc(50% - 0px);
  transition: 0.4s;
}
#header .header .logo > a {
  display: block;
  height: 50px;
}
#header .header .row {
  justify-content: space-between;
  background-color: $header-bg;
  padding: 1rem 4rem;
  border-radius: 100px;
  box-shadow: 0px 0px 0px 0px rgba(16, 76, 61, 0.05), 0px 14px 30px 0px rgba(16, 76, 61, 0.05), 0px 55px 55px 0px rgba(16, 76, 61, 0.04), 0px 124px 75px 0px rgba(16, 76, 61, 0.03),
    0px 221px 88px 0px rgba(16, 76, 61, 0.01), 0px 345px 97px 0px rgba(16, 76, 61, 0);
  @include bp("md") {
    padding: 0.5rem 2rem;
  }
}

#header {
  &.transparent {
    @include bp("md-up") {
      position: fixed;
      width: 100%;
      .header {
        background: transparent;
      }
    }
  }
  .header {
    background: transparent;
    @include bp("sm") {
      padding: 0;
    }
    .container {
      @include bp("xl") {
        max-width: 100%;
      }
      @include bp("sm") {
        padding: 0 15px;
      }
    }
  }
  .header.sticky-header {
    box-shadow: none !important;
    @include bp("sm") {
      padding: 0;
    }
    .logo > a {
      height: 40px;
    }
  }
}

.mobile-menu {
  transition: $trans;
  ul li a {
    border-bottom-color: var(--color-footer-color);
  }
  &.active {
    transition: $trans-h;
    ul li a {
      border-bottom-color: var(--color-footer-color);
    }
  }
}

#header .header .top-menu > div > ul.menu li.menu-item:not(.menu-item-has-children) {
  padding: 0 1.8rem;
}
