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

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

.nav-container {
  overflow: visible;
  width: 100%;
  z-index: 100;

  &.is-fixed {
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-name: roll-in;
    background-color: var(--color-sticky-navigation-background);
    left: 0;
    position: fixed;
    top: 0;
  }
}

@keyframes roll-in {
  0% {
    opacity: 0;
    top: -100%;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}