////////////////////////////////
// CORE / COMPONENTS / NAV: MENU
////////////////////////////////


.dcf-nav-menu-child ul {
  // Fix list-style: none in VoiceOver and Safari: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  margin-bottom: 0;
  padding-left: 0;
}


.dcf-nav-menu li {
  margin-bottom: 0;
}


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


@include mq(md, max, width) {

  .dcf-nav-menu {
    background-color: $bg-color-nav-menu;
    bottom: #{ms(10)}em;
    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
  .dcf-nav-menu.dcf-modal-open {
    opacity: 1;
    pointer-events: auto;
    transition: opacity $transition-duration-fade-in $transition-timing-fn-fade-in;
    visibility: visible;
  }


  .dcf-nav-menu-child {
    //@include bg-scarlet;
    @include overflow-y-auto;
    bottom: #{ms(10)}em;
    height: 43vh;
    padding-left: $length-vw-2;
    padding-right: $length-vw-2;
    position: fixed;
  }


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


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


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

}


@include mq(md, min, width) {

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


}