// Settings
$navheight-expanded: 92px;
$navheight-mobile: 54px;
$navheight-collapsed: 54px;

// Colors
:root {
  --color-sticky-navigation-background: var(--color-valhalla);
}

.site-header {
  transition: all $transition-duration ease;
}

.nav-container {
  height: $navheight-mobile;
  overflow: visible;
  position: fixed;
  transition: all $transition-duration ease;
  width: 100%;
  z-index: 9999;

  .site-header {
    height: auto;
  }

  @media (min-width: $width-max-mobile) {
    height: $navheight-expanded;
  }

  &.nav-container-sticky {
    background-color: var(--color-sticky-navigation-background);
    left: 0;
    position: fixed;
    top: 0;

    .site-header {
      padding-bottom: 5px;
      padding-top: 5px;
    }

    .site-title svg {
      height: 32px;
      position: relative;
      top: 5px;
      width: 32px;
    }

    @media (max-width: $width-max-mobile - 1px) {
      .site-title {
        margin-top: 0;
      }
    }

    nav {
      padding-bottom: 0;
      padding-top: 0;
    }

    .nav-toggle {
      right: 5px;
      top: 5px;
    }

    @media (min-width: $width-max-mobile) {
      height: $navheight-collapsed;
    }

    // Hide when scrolling down, show again when scrolling up
    &.scrolling-down {
      @media (min-width: $width-max-mobile) {
        margin-top: -$navheight-expanded;
      }
    }

    &.scrolling-up {
      top: 0;
    }
  }
}