///////////////////////////////////
// !THEME / COMPONENTS / NAVIGATION
///////////////////////////////////








.unl .dcf-nav-local > ul {
//   @include font-sans;

  @include txt-sm;

  @include mq(sm, min, width) {
    @include txt-xs;
  }

}




.unl .dcf-nav-global li:not(:last-child),
.unl .dcf-nav-local li:not(:last-child) {
  margin-right: 0; // core
}

.unl .dcf-nav-global li:not(:last-child) {
  padding-right: 2.4vw; // core
}

.unl .dcf-nav-local > ul > li {
  margin-bottom: 0;
}


.unl .dcf-nav-local > ul > li > a {
//   display: block;
//   display: flex;
//   flex-grow: 1;
  @include font-sans;
  font-weight: 700;
  @include ls-2;
  @include pt-4;
  @include pb-3;
  text-transform: uppercase;
}


.unl .dcf-nav-local ul ul {
  font-size: 1em; // core
  padding-top: 0; // core
}

.unl .dcf-nav-local ul ul li:last-child {
  margin-bottom: 0; // core
}






@include mq(md, max, width) {

  //Default to closed on mobile
  #dcf-navigation {
    display: none;
  }

  //Open when parent model is open
  .dcf-modal-open #dcf-navigation {
    display: block;
  }

  .headroom {
  	will-change: transform;
  	-webkit-transition: -webkit-transform 250ms ease-out, opacity 250ms ease-out !important;
  	transition: transform 250ms ease-out, opacity 250ms ease-out !important;
  }

//   .headroom--fixed {
//   	position: -webkit-fixed;
//   	position: fixed;
//   	z-index: 10;
//   	right: 0;
//   	left: 0;
//   	bottom: 0vh;
//   }

  .headroom--pinned {
    opacity: 1;
  	-webkit-transform: translateY(0%);
  	-ms-transform: translateY(0%);
  	transform: translateY(0%);
  }

  .headroom--unpinned {
    opacity: 0;
  	-webkit-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	transform: translateY(100%);
  }

  .unl .dcf-mobile-toolbar-menu {
    display: flex;
    left: 0;
  }

  .unl .dcf-mobile-toolbar-toggle-menu {
    padding: 0;
  }

  .unl .dcf-nav-global {
    display: none; // temp
  }

  .unl .dcf-nav-local-wrapper {

//     bottom: #{ms(10)}em;
//     height: 100%;
//     opacity: 0;
//     position: fixed;
//     width: 100%;
//     z-index: 998;

    @include bg-cream;
    bottom: 0;
//     box-shadow: 0 -1px 4px 0 rgba(0,0,0,.1);
    height: 56vh;
    @include overflow-y-scroll;
    -webkit-overflow-scrolling: touch; // remove after added to DCF core
    padding-left: 5.6%;
    padding-right: 5.6%;
//     pointer-events: none;
    position: fixed;
    z-index: 998;

  }

  .unl .dcf-nav-local-wrapper::before {
    background-image: linear-gradient(to top, fade-out($cream, 1), $cream);
    bottom: -#{ms(6)}em;
    content: '';
    height: #{ms(6)}em;
    left: 0;
    position: fixed;
    transform: translateY(-56vh);
    width: 100%;
    z-index: 999;
  }

  .unl .dcf-nav-local {
// //     animation-name: none;
// //     animation: dcf-disappear 500ms ease-out forwards;
//     @include bg-cream;
//     bottom: 0;
// //     box-shadow: 0 -1px 4px 0 rgba(0,0,0,.1);
//     height: 56vh;
//     overflow-y: scroll;
//     -webkit-overflow-scrolling: touch; // remove after added to DCF core
// //     pointer-events: none;
//     position: fixed;
//     z-index: 998;
  }





//   .unl .dcf-nav-local.dcf-is-open {
//     animation: dcf-appear 250ms ease-out forwards;
//     pointer-events: auto;
//     transform: translateY(100%);
//     opacity: 0;
//   }

  .unl .dcf-nav-local > ul {
    padding-bottom: #{ms(14)}em;
    @include pt-8;
  }

  .unl .dcf-nav-local > ul {

    @supports (display: grid) {
      grid-gap: #{ms(6)}em 5.6vw; // core
      grid-template-columns: repeat(auto-fit, minmax(#{ms(16)}em, 1fr)); // core
    }

  }

}


@include mq(sm, min, width) {

  @supports (display: grid) {

    .unl .dcf-nav-local > ul {
      grid-template-columns: repeat(3, 1fr); // core
    }

  }

}


@include mq(md, min, width) {

  .unl .dcf-nav-global {
    display: flex;
  }

  .unl .dcf-nav-global a {
    @include inverse-link;
//     justify-content: flex-end; // core
  }

  .unl .dcf-nav-bar {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 5.6%;
    padding-right: 5.6%;
  }

  .unl .dcf-nav-bar::after {
    content: '';
    position: absolute;
    background-image: linear-gradient(to bottom, $cream, fade-out($cream,.05));
    height: 100vh;
    left: 0;
    opacity: 0;
    pointer-events: none;
    top: 100%;
    transition: opacity 400ms ease-out;
    width: 100%;
    z-index: 998;
  }

//   .unl .dcf-mobile-toolbar-modal {
  #dcf-navigation {
    display: flex;
  }

  .unl .dcf-nav-local-wrapper {
    display: flex;
  }

  .unl .dcf-mobile-toolbar-menu {
    border-top: 1px solid #eee;
    display: flex;
    @include font-sans;
  }

  .unl .dcf-mobile-toolbar-toggle-menu {
    @include pb-3;
    @include pl-0;
    @include pt-4;
  }

  .unl .dcf-mobile-toolbar-label-menu {
    @include font-sans;
    font-size: #{ms(-6)}em;
    font-weight: bold;
    @include ls-2;
    text-transform: uppercase;
  }

  .unl .dcf-mobile-toolbar-icon-menu {
    @include h-3;
    margin-bottom: #{ms(-8)}em;
    @include w-3;
  }

//   .unl .dcf-mobile-toolbar-modal {
//     position: relative;
//   }


  .unl .dcf-nav-local {
    @include bt;
    border-color: #eee;
    display: flex;
  }

  .unl .dcf-nav-local a {
    display: block;
    @include pl-5;
  }

  .unl .dcf-nav-local > ul {
    display: grid; // core
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 0;
//     border-top: 1px solid #eee;
//     flex-flow: row nowrap;
    width: 100%;
  }

  .unl .dcf-nav-local > ul > li {
    position: relative;
//     display: flex;
//     flex-direction: column;
//     flex-grow: 1;
//     align-items: center;
  }

  .unl .dcf-nav-local > ul > li:not(:last-child) a {
    @include pr-5;
  }

  .unl .dcf-nav-local > ul > li > a {
    border-left: 1px solid #eee;
    height: 100%;
//     justify-content: center;
    @include lh-3;
//     padding: #{ms(0)}em 2.4vw;
    @include pb-4;
    @include pt-4;
//     text-align: center;
    width: 100%;
  }

  .unl .dcf-nav-local ul ul {
    background: linear-gradient(to bottom, #eee, fade-out(#eee,1)) 0 0 / 1px 100% no-repeat;
    @include pb-8;
    margin-top: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 999;


// position: absolute;
border: 0;
// clip: rect(1px, 1px, 1px, 1px);
clip: auto;
// height: 1px;
height: auto;
// overflow: hidden;
overflow: auto;
// position: absolute;
// width: 1px;
// word-wrap: normal;
word-wrap: normal;

  }

  .unl .dcf-nav-bar .dcf-nav-local ul ul  {
    display: none;
  }



  .unl .dcf-nav-bar.dcf-modal-open::after {
    opacity: 1;
    transition: opacity 200ms ease-out;
  }

  .unl .dcf-nav-bar.dcf-modal-open .dcf-nav-local ul ul  {
    display: block;
  }

}