body {
  --nn-theme-nav-header-bg: transparent;
  --nn-theme-nav-bg: transparent;
  --nn-theme-list-header-bg: transparent;
  --nn-theme-list-bg: transparent;
}

.notebook-navigator {
  padding: 0 !important;
  background-color: transparent;
}
.nn-search-input {
  height: 100% !important;
}

.nn-split-container.nn-single-pane {
  .nn-navigation-pane .nn-pane-header,
  .nn-navigation-pane-scroller {
    border-right: none !important;
  }
}

body.is-mobile .nn-mobile {
  --nn-theme-mobile-nav-bg: transparent;
  --nn-theme-mobile-toolbar-button-icon-color: var(--text-normal);

  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;

  .nn-navigation-pane,
  .nn-list-pane {
    align-items: center;
  }
  .nn-navigation-pane-scroller,
  .nn-list-pane-scroller {
    padding-bottom: 6rem;
    width: 100%;
  }
  .nn-pane-header {
    width: 100%;
  }

  .nn-mobile-toolbar {
    position: absolute;
    gap: 8px;
    z-index: var(--layer-status-bar);
    backdrop-filter: var(--blur-s);
    margin: 0 auto max(var(--safe-area-inset-bottom), 16px);
    box-shadow: var(--shadow-xs);
    border: none;
    border-radius: var(--clickable-icon-radius);
    background-color: transparent;
    padding: 0 8px;
    max-width: fit-content;
    overflow: hidden;
    pointer-events: auto;
    bottom: 0;
  }
  .nn-mobile-toolbar-button {
    width: 48px;
    height: 48px;
    line-height: 1;
    align-items: center;
    justify-content: center !important;

    span {
      line-height: 1;
    }
  }
}

body.is-tablet .nn-mobile .nn-mobile-toolbar {
  margin-bottom: 16px;
}
