///////////////////////////////////
// THEME / COMPONENTS / NAV: TOGGLE
///////////////////////////////////


.unl .dcf-nav-toggle-btn {
  appearance: none;
}


@media (prefers-color-scheme: dark) {

  .dcf-idm-status-logged-out a,
  .dcf-idm-status-logged-out a:visited {
    color: $cream;
  }

}


@include mq(md, max, width) {

  .unl .dcf-nav-toggle-group {
    display: flex;
    z-index: $z-nav-toggle-group;

    // Browsers which partially support CSS Environment variables (iOS 11.0-11.2)
    @supports (padding-bottom: constant(safe-area-inset-bottom)) {
      --safe-area-inset-bottom: constant(safe-area-inset-bottom);
      padding-bottom: var(--safe-area-inset-bottom);
    }

    // Browsers which fully support CSS Environment variables (iOS 11.2+)
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
      padding-bottom: var(--safe-area-inset-bottom);
    }

  }


  .unl .dcf-nav-toggle-btn {
    flex-basis: 25%;
  }


  .unl .dcf-nav-menu .dcf-nav-toggle-btn-menu {
    display: none;
  }


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


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


  .headroom--pinned {
  	transform: translateY(0%);
  }


  .headroom--unpinned {
  	transform: translateY(100%);
  }

}


@include mq(md, min, width) {

  .unl .dcf-nav-toggle-group {
    display: none;
  }


  .unl .dcf-nav-menu .dcf-nav-toggle-btn-menu {
    display: flex;
  }

}