// EXTEND STYLE IN BASE
// --------------------
@import "../../../plugins/system/t4/themes/base/scss/megamenu";

.t4-megamenu {

  // THE MEGAMENU
  //--------------------------------------------
  .navbar-nav {
    > li {
      > a,
      > .nav-link {
        color: var(--mainnav-link-color);
        font-size: $nav-link-font-size;
        font-weight: $nav-link-font-weight;
        padding: $t4-nav-link-padding-y $t4-nav-link-padding-x;
        height: $t4-nav-height;
        line-height: $t4-nav-height - ($t4-nav-link-padding-y * 2);
        transition: $nav-link-transition;
        text-transform: uppercase;

        @include media-breakpoint-up(md) {
        }

        // Caret
        .item-caret::before {
          border-top-color: var(--mainnav-link-color);
        }

        &:hover, &:focus, &:active {
          color: var(--mainnav-link-hover-color);

          // Caret
          .item-caret::before {
            border-top-color: var(--mainnav-link-hover-color);
          }
        }
      }

      // Parent focus
      &.show {
        > a,
        > .nav-link {
          color: var(--mainnav-link-hover-color);

          // Caret
          .item-caret.item-caret {
            border-top-color: var(--mainnav-link-hover-color);
          }
        }
      }

      // Active item
      &.active {
        > a,
        > .nav-link {
          color: var(--mainnav-link-active-color);

          // Caret
          .item-caret.item-caret {
            border-top-color: var(--mainnav-link-active-color);
          }
        }
      }

      &:last-child {
        > a,
        > .nav-link {
          border: 0;
        }
      }
    }
  }

  // Caption
  .mega-caption {
    position: absolute;
    bottom: $t4-nav-link-padding-y * 0.8;
    line-height: 1;
  }

  // Dropdown menu
  .dropdown-menu {
    background: $dropdown-bg;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    border-radius: $border-radius;
    border: 0;
    color: var(--mainnav-text-color);
    min-width: $dropdown-min-width;
    margin-top: 0;
    padding: $grid-gutter-width / 2 $grid-gutter-width;

    @include media-breakpoint-up(lg) {
      box-shadow: $z-depth-1;
    }

    .dropdown-menu-inner {
    }

    a {
      color: var(--mainnav-link-color);

      &:hover, &:focus, &:active {
        background-color: transparent;
        color: var(--mainnav-link-hover-color);
      }
    }

    li {
      &:last-child {
        border: 0;
      }

      > a,
      > .nav-link,
      .dropdown-item {
        color: var(--mainnav-link-color);
        padding: $nav-link-padding-y 0;
        white-space: normal;
        height: auto;
        line-height: var(--body-line-height);

        &:hover, &:focus, &:active {
          color: var(--mainnav-link-hover-color);
        }
      }

      &.active {
        > a {
          color: var(--mainnav-link-active-color);
        }
      }
    }
  }

  // Parent hover
  .parent {
  }

  .dropdown-toggle {
    &:after {
      margin-top: $spacer/2;
      float: right;
    }
  }

  .dropdown {
    &:hover {
      > .dropdown-menu {
      }
    }

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


  // Modules in Megamenu
  // -------------------
  .mega-col-module {
  }

  // Inner padding
  .mega-col-module .mega-inner {
  }


  .t4-module {
    border-radius: 0;
    border: 0;
  }

  .t4-module .module-inner {
  }

  // Module Title
  // Navigation title
  .t4-module .module-title,
  .mega-col-nav .mega-col-title,
  .mega-col-module .mega-col-title {
    border-color: var(--t4-border-color);
    font-size: $t4-fs-mega-col-title;
    font-weight: $font-weight-semibold;
    text-transform: uppercase;

    span {
      color: $headings-color;
    }
  }

  // Navigation in Module

  .t4-module .nav,
  .mega-col-module .navbar {
   list-style: none;
   margin: 0;
   padding: 0;

   li.nav-item {
     list-style: none;
     flex-basis: 100%;

     a {
       display: block;
       padding: $spacer/2 0;

       &:hover, &:focus, &:active {
         background-color: transparent;
       }
     }
   }
 }

  .dropstart {
    .dropdown-menu {
      right: 100%;
      top: 0px;
    }
  }

  .dropend {
    .dropdown-menu {
      left: 100%;
      top: 0;
    }
  }

}