$submenu-max-width: map-get($container-max-widths, xxl) !default;

.submenu {
   background: $white;
   border-top: 1px solid $border-color;
   box-shadow: 0 18px 18px 0 rgba(0, 0, 0, .06);
   display: block;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   padding: 30px 40px;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   transition: all $transition-speed;
   z-index: -1;

   ul {
      @include list-unstyled;
   }

   a {
      color: #1c1c1c;
   }

   .level-1 {
      column-count: 4;
      margin: auto;
      max-width: map-get($container-max-widths, xxl);

      > li {
         page-break-inside: avoid;
         break-inside: avoid-column;

         > a {
            color: $text-dark;
            font-weight: 700;
            letter-spacing: .12em;
            padding: 1px 0;
            text-transform: uppercase;

            &:not(:last-child) {
               margin-top: 10px;
            }
         }
      }
   }

   .level-2 {
      padding: 0 0 15px;
   }

   .has-submenu:not(:first-child) {
      margin-top: 10px;
   }
}

//debug submenu
//[data-navitem="15"] .submenu,
.has-submenu.hover .submenu,
.no-js .has-submenu:hover .submenu {
   opacity: 1;
   max-height: 600px;
   z-index: 20;
}

