/////////////////////////////////
// THEME / COMPONENTS / NAV: MENU
/////////////////////////////////


.unl .dcf-nav-menu li { // TODO: remove after updated in DCF core
  margin-bottom: 0;
}


.unl .dcf-nav-menu-child a,
.unl .dcf-nav-menu-child button {
  display: block;
  @include lh-3;
  padding: #{ms(-2)}rem #{ms(0)}rem;
}


// TODO: determine focus state styles
.unl .dcf-nav-menu-child a:link,
.unl .dcf-nav-menu-child a:visited,
.unl .dcf-nav-menu-child a:hover,
.unl .dcf-nav-menu-child a:active,
.unl .dcf-nav-menu-child button {
  @include cream;
}


.unl .dcf-nav-menu-child > ul > li > a,
.unl .dcf-nav-menu-child button {
  font-weight: 600;
}


@include mq(md, max, width) {

  .unl .dcf-nav-menu {
    @include bg-overlay-light;
    bottom: #{$height-mobile-toolbar};
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity $transition-duration-fade-in $transition-timing-fn-fade-in, visibility 0ms .4s;
    visibility: hidden;
    width: 100%;
    z-index: 998; // Ensure that the z-index is below the modal and nav-toggle-group z-indices
  }


  // Open when parent model is open
  .unl .dcf-nav-menu.dcf-modal-open {
  	opacity: 1;
  	pointer-events: auto;
    transition: opacity $transition-duration-fade-in $transition-timing-fn-fade-in;
  	visibility: visible;
  }


  .unl .dcf-nav-menu-child {
    @include bg-scarlet;
    bottom: $height-mobile-toolbar;
    height: 43vh;
    @include overflow-y-auto;
    padding-left: $length-vw-2;
    padding-right: $length-vw-2;
    position: fixed;
  }


  .unl .dcf-nav-menu-child > *:first-child {
    @include mt-6;
  }


  .unl .dcf-nav-menu-child > *:last-child {
    @include mb-7;
  }


  .unl .dcf-nav-menu a,
  .unl .dcf-nav-menu button {
    margin-left: -#{ms(0)}rem;
  }


  .unl .dcf-nav-menu ul > li > ul > li > a,
  .unl .dcf-nav-menu ul > li > ul > li > button {
    font-size: #{ms(-1)}rem !important;
  }

}


@include mq(md, min, width) {

  .unl .dcf-nav-menu {
    @include bg-scarlet;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: clip;
    padding-left: $length-vw-2;
    padding-right: $length-vw-2;
  }


  .unl .dcf-nav-menu ul:first-child > li > a,
  .unl .dcf-nav-menu ul:first-child > li > button {
    font-size: #{ms(-1)}rem !important;
  }


  .unl .dcf-nav-menu ul > li > ul > li > a,
  .unl .dcf-nav-menu ul > li > ul > li > button {
    font-size: #{ms(-2)}rem !important;
  }

}