//////////////////////////////////
// !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(0)}em #{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: 700;
}


@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 $timing-fade-out $easing-fade-out, 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 $timing-fade-in $easing-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-child::before,
  .unl .dcf-nav-menu-child::after {
    content: '';
    height: #{ms(6)}em;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 999;
  }


  .unl .dcf-nav-menu-child::before {
    background-image: linear-gradient($scarlet, fade-out($scarlet, 1));
    bottom: calc(#{$height-mobile-toolbar} + 43vh);
    transform: translateY(99%);
  }


  .unl .dcf-nav-menu-child::after {
    background-image: linear-gradient(fade-out($scarlet, 1), $scarlet);
    bottom: $height-mobile-toolbar;
  }

}


@include mq(md, min, width) {

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

  .unl .dcf-nav-menu a,
  .unl .dcf-nav-menu button, {
    @include txt-xs;
  }

}