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

$mega-menu-bg: $header-bg !default;
$mega-menu-br: 0 0 0 0 !default;
$mega-menu-pd: 1.6rem !default;

.header .top-menu > div > ul.menu li.menu-item {
  &.menu-item-megamenu {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    i {
      position: relative;
      transform: translate(50%, 0px);
      svg {
        max-width: 2rem;
      }
    }
    > a {
      display: flex;
      align-items: center;
      align-content: center;
      img {
        order: -1;
        margin-right: 1rem;
      }
    }
    .sub-menu {
      width: $container-xxl !important;
      max-width: 100%;
      left: 50%;
      transform: translate(-50%, calc(50% + 10px));
      flex-wrap: wrap;
      flex: 1 0 100%;
      background-color: $mega-menu-bg;
      border-radius: $mega-menu-br;
      padding: $mega-menu-pd;
      > li {
        flex: 1 0 25%;
        max-width: 25%;
      }
      .sub-menu {
        position: relative;
        width: auto;
        padding: 0px;
        left: 0;
        transform: none;
        box-shadow: none;
        display: block !important;
        opacity: 1 !important;
        & ~ i {
          display: none !important;
        }
        > li {
          flex: 1 0 100%;
          max-width: 100%;
        }
        .sub-menu {
          flex-wrap: wrap;
          > li {
            flex: auto;
            max-width: inherit;
            padding: 0;
            a {
              text-transform: none;
              font-weight: $fw-regular;
              font-size: $fs-mini;
            }
          }
        }
      }
    }
    &.active {
      .sub-menu {
        display: flex !important;
      }
      i {
        transform: scaleY(-1) translate(50%, 0);
      }
    }
    &.menu-item-megamenu-column-2,
    &.menu-item-megamenu-column-3,
    &.menu-item-megamenu-column-4,
    &.menu-item-megamenu-column-5 {
      .sub-menu {
        > li {
          .sub-menu {
            > li {
              flex: inherit;
              max-width: 100%;
              display: inherit;
              > a {
                display: flex;
                align-items: center;
                align-content: center;
                img {
                  order: -1;
                  margin-right: 1rem;
                }
              }
            }
          }
        }
      }
    }
    &.menu-item-megamenu-column-2 {
      .sub-menu {
        > li {
          flex: 1 0 50%;
          max-width: 50%;
          &:nth-child(n + 3) {
            display: none;
          }
        }
      }
    }
    &.menu-item-megamenu-column-3 {
      .sub-menu {
        > li {
          flex: 1 0 33.3333%;
          max-width: 33.3333%;
          &:nth-child(n + 4) {
            display: none;
          }
        }
      }
    }
    &.menu-item-megamenu-column-4 {
      > .sub-menu {
        > li {
          flex: 1 0 25%;
          max-width: 25%;
          &:nth-child(n + 5) {
            display: none;
          }
        }
      }
    }
    &.menu-item-megamenu-column-5 {
      > .sub-menu {
        > li {
          flex: 1 0 20%;
          max-width: 20%;
          &:nth-child(n + 6) {
            display: none;
          }
        }
      }
    }
  }
  &.menu-item {
    i {
      position: relative;
      transform: translate(50%, 0px);
      svg {
        max-width: 2rem;
      }
    }
    > a {
      display: flex;
      align-items: center;
      align-content: center;
      img {
        order: -1;
        margin-right: 1rem;
      }
    }
  }
}

.mobile-menu ul li a {
  display: flex;
  align-items: center;
  img {
    order: -1;
    margin-right: 1rem;
    max-height: 25px;
    width: auto;
  }
}

.header .top-menu > div > ul.menu li.menu-item a {
  display: flex;
  align-items: center;
  img {
    order: -1;
    margin-right: 1rem;
  }
  i {
    order: 10;
  }
}

.header
  .top-menu
  > div
  > ul.menu
  > li.menu-item.menu-item-has-children:not(.menu-item-megamenu) {
  i {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
  &.active {
    i {
      transform: scaleY(-1) translate(50%, 50%);
      transform-origin: center;
    }
  }
}
