@value breakpoint-below-md from 'pageflow-scrolled/values/breakpoints.module.css';

:root {
  --default-navigation-bar-height:
    var(--theme-default-navigation-bar-height, 50px);

  --default-navigation-progress-bar-height:
    var(--theme-default-navigation-progress-bar-height, 8px);

  --widget-margin-top: var(--default-navigation-progress-bar-height);
}

:root[data-default-navigation-expanded] {
  --widget-margin-top: calc(var(--default-navigation-bar-height) +
                            var(--default-navigation-progress-bar-height));
}

.navigationBar {
  composes: scope-defaultNavigation from global;

  --default-navigation-padding-inline:
    var(--theme-default-navigation-padding-inline, 12px);

  --default-navigation-scroller-top:
    var(--theme-default-navigation-scroller-top, 0);

  --default-navigation-scroll-button-top:
    var(--theme-default-navigation-scroll-button-top, 5px);

  --default-navigation-chapter-link-height:
    var(--theme-default-navigation-chapter-link-height, 50px);

  --default-navigation-separator-color:
    var(--theme-default-navigation-separator-color, #e9e9e9);

  --default-navigation-scroller-right: 21%;

  font-family: var(--theme-widget-font-family);
  position: fixed;
  top: calc(-1 * var(--default-navigation-bar-height));
  transition: top .15s;
  z-index: 10000;
  width: 100%;
  text-align: center;
  height: 0;
  user-select: none;
}

.navigationBar:has(.contextIcons > :nth-child(4)) {
  --default-navigation-scroller-right: 26%;
}

.navigationBarExpanded {
  top: 0;
}

.navigationBarContentWrapper {
  composes: translucentWidgetSurface from 'pageflow-scrolled/values/widgets.module.css';
  position: relative;
  z-index: 2;
  height: var(--default-navigation-bar-height);
  box-sizing: border-box;
  padding-top: var(--default-navigation-scroller-top);
}

.button {
  composes: unstyledButton from '../../frontend/utils.module.css';
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--theme-default-navigation-button-width, 40px);
  height: var(--default-navigation-bar-height);
  cursor: pointer;
}

.button svg {
  width: var(--theme-default-navigation-button-icon-size, 35px);
  height: var(--theme-default-navigation-button-icon-size, 35px);
}

.menuIcon {
  composes: button;
  position: absolute;
  top: 0;
  left: var(--default-navigation-padding-inline);
}

.contextIcons {
  position: absolute;
  top: 0px;
  right: var(--default-navigation-padding-inline);
  display: flex;
}

.contextIcons > * {
  pointer-events: auto;
}

.contextIcon {
  composes: button;
  color: var(--theme-widget-secondary-color);
  fill: currentcolor;
  stroke: currentColor;
}

div:focus-within > .contextIcon,
.contextIcon:hover,
.menuIcon {
  color: var(--theme-widget-primary-color);
}

.logo {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 15px;
  height: 100%;
  max-width: 15%;
}

.logo picture {
  height: var(--theme-default-navigation-mobile-logo-height, 100%);
}

@media (min-width: 781px) {
  .logo picture {
    height: var(--theme-default-navigation-desktop-logo-height, 100%);
  }
}

.logo img {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.chapterList {
  composes: scope-defaultNavigationChapterList from global;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.chapterListItem {
  position: relative;
  padding: 0 5px;
  border-right: 1px solid var(--default-navigation-separator-color);
}

.chapterListItem:last-of-type {
  border-right: none;
}

.navigationTooltip {
  opacity: 1 !important;
  box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);
}

.progressBar {
  position: relative;
  background-color: var(--theme-default-navigation-progress-bar-background-color,
                        rgba(194,194,194,0.8));
  height: var(--default-navigation-progress-bar-height);
  width: 100%;
  backdrop-filter: blur(var(--theme-default-navigation-progress-bar-backdrop-blur,
                            var(--theme-widget-surface-backdrop-blur)));
}

.progressIndicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0vw;
  height: 100%;
  background-color: var(--theme-default-navigation-progress-bar-indicator-color,
                        var(--theme-accent-color));
}

@media screen and breakpoint-below-md {
  .navigationBar {
    --default-navigation-progress-bar-height:
      var(--theme-default-navigation-progress-bar-height, 10px);
  }

  .logo {
    max-width: 30%;
  }

  .hasChapters .logo {
    left: 65px;
  }

  .centerMobileLogo.logo {
    left: 50%;
    transform: translate(-50%);
  }

  .navigationChapters {
    display: block;
    position: fixed;
    top: calc(var(--default-navigation-bar-height) +
              var(--default-navigation-progress-bar-height));
    left: 0px;
    background: var(--theme-widget-background-color);
    backdrop-filter: blur(var(--theme-widget-background-backdrop-blur));
    width: 100vw;
    bottom: 0;
    overscroll-behavior: contain;
    overflow: scroll;
  }

  .navigationChaptersHidden {
    display: none;
  }

  .chapterList {
    display: block;
    padding-top: var(--default-navigation-bar-height);
    box-sizing: border-box;
    /*
      Prevent scrolling the page when mobile navigation is open, by
      forcing overflow and setting `overscroll-behavior: contain`
      above. Normally this should be done with `touch-action: none`.
      But using `touch-action` causes weird rendering bugs in Chrome
      on Android.
    */
    min-height: 101%;
  }

  .chapterListItem {
    padding: 1rem;
    margin: 0 1.5rem;
    border-right: none;
    border-bottom: 1px solid var(--default-navigation-separator-color);
  }

  .chapterListItem:last-child {
    border-bottom: none;
  }

  .chapterListItem p {
    margin-top: 0;
  }
}

@media print {
  .navigationBar {
    position: relative;
    top: 0;
    height: auto;
  }

  .logo {
    left: 0;
  }

  .chapterList,
  .contextIcons,
  .progressBar {
    display: none;
  }
}
