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


@use "../variables/" as var;
@use "../mixins/" as mixins;


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


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

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

}


@include mixins.mq(md, max, width) {

  .unl .dcf-nav-toggle-region {
    padding-inline: #{var.$inset-inline-mobile-toolbar};
    z-index: 99999;


    // 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-region::after {
    background-image: linear-gradient(180deg,
      var.$scarlet calc(100% - #{var.$inset-bottom-mobile-toolbar} - #{var.$height-mobile-toolbar}),
      var.$scarlet-shade calc(100% - #{var.$inset-bottom-mobile-toolbar})
    );
    border-radius: var.$roundrect;
    bottom: -#{var.$roundrect};
    content: '';
    display: block;
    height: #{var.$height-mobile-toolbar-open};
    left: -#{var.$roundrect};
    position: absolute;
    transform: scale(.84, .84);
    transform-origin: 50% var.$roundrect;
    transition: transform var.$transition-duration-transform-nav-toggle-region var.$transition-timing-fn-transform-nav-toggle-region var.$transition-delay-transform-nav-toggle-region;
    width: calc(100% + var.$roundrect * 2);
    z-index: -1;
  }


  .unl .dcf-nav-toggle-region:has([aria-expanded="true"])::after {
    transform: scale(1, 1);

    @starting-style {
      transform: scale(.84, .84);
    }

  }


  .unl .dcf-nav-toggle-group {
    background-image: linear-gradient(180deg, var.$scarlet, var.$scarlet-shade);
    // box-shadow: 0 1px 3px rgba(57, 0, 0, .5), 0 1px 12px 1px rgba(57, 0, 0, .1);
    height: #{var.$height-mobile-toolbar};
    margin-bottom: #{var.$inset-bottom-mobile-toolbar};
  }


  // Hide "close" icon and label by default, hide "open" icon and label when respective dialog is open
  .unl .dcf-nav-toggle-btn .dcf-nav-toggle-icon-close,
  .unl .dcf-nav-toggle-btn .dcf-nav-toggle-label-close,
  .unl .dcf-nav-toggle-btn.dcf-dialog-is-open .dcf-nav-toggle-icon-open,
  .unl .dcf-nav-toggle-btn.dcf-dialog-is-open .dcf-nav-toggle-label-open {
    display: none;
  }


  // Show "close" icon and label when respective dialog is open
  .unl .dcf-nav-toggle-btn.dcf-dialog-is-open .dcf-nav-toggle-icon-close,
  .unl .dcf-nav-toggle-btn.dcf-dialog-is-open .dcf-nav-toggle-label-close {
    display: block;
  }


  // Hide desktop menu button
  .unl .dcf-nav .dcf-nav-toggle-btn-menu {
    display: none;
  }

}


@include mixins.mq(md, min, width) {

  // Hide mobile toolbar
  .unl .dcf-nav-toggle-group {
    display: none;
  }


  .unl .dcf-nav .dcf-nav-toggle-btn-menu {
    padding: .67rem 0;
  }

}