.no-scroll {
  height: 100vh;
  overflow: hidden;
}

// Default navbar
.navbar-default {
  --bs-navbar-brand-padding-y: 0;

  background-color: var(--navbar-bg);
  border-color: var(--navbar-border);
  padding: var(--navbar-padding);
  position: absolute;
  top: 0;
  width: 100%;
  height: $header-height;

  .navbar-container {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 0;
    min-width: 0;
  }

  .navbar-brand {
    height: $header-height;
    text-decoration: none;
    z-index: 15;
    display: flex;
    gap: var(--spacing-08);
    max-width: 100%;
    min-width: 0;

    &:hover,
    &:active,
    &:focus {
      text-decoration: none;
    }

    .navbar-logo {
      flex: 0 0 auto;
      width: var(--navbar-brand-width);
      height: $header-height;
      padding: 0;
      background: var(--navbar-brand-image-url) no-repeat left center;
      background-size: contain;
    }

    .navbar-title {
      display: inline-block;
      font-size: var(--navbar-title-font-size);
      color: var(--navbar-title-color);
      text-decoration: none;
      align-self: center;
      text-overflow: ellipsis;
      overflow: hidden;

      &:hover,
      &:active,
      &:focus {
        color: var(--navbar-title-color-hover);
      }
    }
  }

  .navbar-nav {
    > li {
      display: inline-flex;
      flex-shrink: 0;

      > .nav-link,
      > .dropdown-toggle {
        display: block;
        color: var(--navbar-link-color);
        background-color: transparent;
        padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
        margin-left: var(--navbar-item-spacing-horizontal);
        border: var(--navbar-btn-border-width) solid
          var(--navbar-link-border-color);
        border-radius: var(--navbar-btn-border-radius);
        font-size: var(--navbar-btn-font-size);
        font-weight: var(--navbar-btn-font-weight);
        line-height: var(--navbar-btn-line-height);
        text-decoration: none;

        &.show,
        &:hover,
        &:focus {
          color: var(--navbar-link-hover-color);
          background-color: var(--navbar-link-hover-bg);
          border-color: var(--navbar-link-hover-border-color);
        }
      }

      &.subdued > .nav-link,
      &.subdued > .dropdown-toggle {
        border: 0;
        color: var(--navbar-subdued-color);
        padding: var(--navbar-subdued-padding);
        margin-left: 0;

        &.show,
        &:hover,
        &:focus {
          color: var(--navbar-subdued-hover-color);
          background-color: var(--navbar-subdued-hover-bg);
        }
      }

      &.primary > .nav-link {
        color: var(--navbar-primary-color);
        background-color: var(--navbar-primary-bg);
        border-color: var(--navbar-primary-border-color);

        &.show,
        &:hover,
        &:focus {
          background-color: var(--navbar-primary-hover-bg);
          border-color: var(--navbar-primary-hover-border-color);
        }
      }
    }
  }

  .navbar-toggler {
    --bs-navbar-toggler-padding-x: var(--spacing-04);

    color: var(--navbar-link-color);
    border-radius: var(--border-radius-base);
    border-width: 0;
    transition: 0.2s ease-out;

    &:not(.collapsed) {
      color: var(--navbar-toggler-expanded-color);
      background-color: var(--navbar-toggler-expanded-bg);
      transition: 0.2s ease-in;
    }

    & .material-symbols {
      font-size: inherit;
      font-weight: bold;
      vertical-align: middle;
    }
  }

  .navbar-collapse,
  .navbar-form {
    border-color: var(--navbar-border);
  }

  .navbar-collapse:not(.show, .collapsing) {
    flex: 0 0 auto; // allow navbar title to expand without overflowing
  }
}

@include media-breakpoint-only(lg) {
  :root {
    --navbar-btn-padding-h: #{$spacing-04};
  }
}

// Different (stacked) layout for smaller screens
@include media-breakpoint-down(lg) {
  .navbar-default .navbar-collapse {
    &.show {
      min-height: calc(100vh - $header-height);
    }

    background-color: var(--navbar-bg);
    margin: 0 calc(-1 * var(--navbar-padding-h));
    z-index: 10;

    .navbar-nav {
      > li {
        display: block;

        > a,
        > .dropdown-toggle,
        > .nav-link {
          margin: 0;
          padding-top: var(--spacing-05);
          padding-bottom: var(--spacing-05);
          width: 100%;
          text-align: left;
          border-radius: 0;
          border-width: 0;
        }

        // Dropdowns get custom display when collapsed
        .dropdown-menu.show {
          --bs-dropdown-spacer: 0;

          box-shadow: none;
          background-color: var(--navbar-hamburger-submenu-bg);
          border: none;
          width: auto;

          .dropdown-item {
            padding: var(--spacing-02) var(--spacing-06) var(--spacing-02)
              var(--spacing-08);
            background-color: transparent;

            &:not(.disabled) {
              color: var(--navbar-hamburger-submenu-item-color);

              &:hover,
              &:focus {
                color: var(--navbar-hamburger-submenu-item-hover-color);
                background-color: var(--navbar-hamburger-submenu-item-hover-bg);
              }
            }
          }
        }
      }
    }
  }
}

// Accessibility
.skip-to-content {
  color: var(--navbar-link-color);
  background-color: var(--navbar-link-bg);
  border: var(--spacing-01) solid transparent;
  border-radius: var(--navbar-btn-border-radius);
  font-size: var(--navbar-btn-font-size);
  font-weight: var(--navbar-btn-font-weight);
  left: calc(var(--navbar-brand-width) + var(--spacing-09));
  line-height: var(--navbar-btn-line-height);
  padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
  position: absolute;
  top: -200px;
  z-index: 1;

  &:focus {
    background-color: var(--navbar-link-hover-bg);
    border: var(--spacing-01) solid var(--navbar-link-hover-color);
    color: var(--white);
    text-decoration: none;
    top: calc(($header-height - 36px) / 2); // 36px is the height of the link
  }
}

@mixin navbar-light() {
  --navbar-title-color: var(--content-primary);
  --navbar-title-color-hover: var(--content-secondary);
  --navbar-brand-image-url: var(
    --navbar-brand-image-redesign-url,
    url('../../../frontend/js/shared/svgs/overleaf-green.svg')
  );
  --navbar-subdued-color: var(--content-primary);
  --navbar-subdued-hover-bg: var(--bg-dark-primary);
  --navbar-subdued-hover-color: var(--content-primary-dark);
  --navbar-bg: var(--bg-light-primary);

  // Navbar links
  --navbar-link-color: var(--content-primary);
  --navbar-link-border-color: var(--border-primary);
  --navbar-link-hover-color: var(--navbar-link-color);
  --navbar-link-hover-bg: var(--bg-light-tertiary);
  --navbar-link-hover-border-color: var(--navbar-link-border-color);

  // Toggler
  --navbar-toggler-expanded-bg: none;
  --navbar-toggler-expanded-color: var(--content-secondary);

  // Mobile view
  --navbar-hamburger-submenu-bg: var(--bg-light-secondary);
  --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
  --navbar-hamburger-submenu-item-hover-color: var(--content-primary-dark);
  --navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-primary);
}

@mixin navbar-dark() {
  --navbar-title-color: var(--content-primary-dark);
  --navbar-title-color-hover: var(--content-secondary-dark);
  --navbar-brand-image-url: var(
    --navbar-brand-image-redesign-url,
    url('../../../frontend/js/shared/svgs/overleaf-green.svg')
  );
  --navbar-subdued-color: var(--content-primary-dark);
  --navbar-subdued-hover-bg: var(--bg-dark-secondary);
  --navbar-subdued-hover-color: var(--content-primary-dark);
  --navbar-bg: var(--bg-dark-primary);

  // Navbar links
  --navbar-link-color: var(--content-primary-dark);
  --navbar-link-border-color: var(--border-primary-dark);
  --navbar-link-hover-color: var(--navbar-link-color);
  --navbar-link-hover-bg: var(--bg-dark-tertiary);
  --navbar-link-hover-border-color: var(--navbar-link-border-color);

  // Toggler
  --navbar-toggler-expanded-bg: none;
  --navbar-toggler-expanded-color: var(--content-secondary-dark);

  // Mobile view
  --navbar-hamburger-submenu-bg: var(--bg-dark-primary);
  --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
  --navbar-hamburger-submenu-item-hover-color: var(--content-primary-dark);
  --navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-secondary);
}

.website-redesign-navbar,
.website-redesign .navbar-default {
  @include navbar-light;
}

@include theme('default') {
  #project-list-root,
  #library-root {
    .website-redesign-navbar,
    .website-redesign .navbar-default {
      @include navbar-dark;
    }
  }
}
