.Nav--primary {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transition:
    top 300ms ease-out,
    background 300ms ease-out;
  background: var(--colour-black);
}

/* Logo */
.Nav__logo {
  position: relative;
}
.Nav__logo:before {
  position: absolute;
  inset: 0;
  display: block;
  content: "";
  background: url(../images/luxid-logo-white.svg) center / contain no-repeat;
}
.Nav__logo img {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

/* Visibiility modifiers */
.Nav--primary.is-hidden {
  /*top: calc(-2rem - var(--logo-height));*/
  top: calc(-36px - var(--logo-height));
}
.Nav--primary.is-scrolled {
  transition:
    top 300ms ease-out,
    background 0ms 300ms;
  background: var(--colour-white);
}
.Nav--primary.is-scrolled .Nav__logo img {
  opacity: 1;
}
.Nav--primary.is-scrolled .Nav__logo:before {
  opacity: 0;
  transition: opacity 0ms 300ms;
}
.Nav--primary.is-visible {
  top: 0 !important;
  background: var(--colour-white);
}

/* Dark Menu */
.Nav--primary:not(.is-scrolled) .Nav__toggle .line {
  background: var(--colour-white);
}
.Nav--primary:not(.is-scrolled) .Nav__logo.focus-visible, .NavMenuLink.focus-visible {
  outline: 2px solid var(--colour-white);
}
.Nav--primary:not(.is-scrolled) .Nav__logo.focus-visible, .NavMenuLink.focus-visible {
  outline: 2px solid var(--colour-white);
}
.Nav--primary:not(.is-scrolled) .Nav__logo:focus-visible, .NavMenuLink:focus-visible {
  outline: 2px solid var(--colour-white);
}

.Nav--primary:not(.is-scrolled) .NavMenu--sub sub {
  color: var(--colour-black);
}
.Nav--primary:not(.is-scrolled) .NavMenuLink {
  color: var(--colour-white);
}
.Nav--primary:not(.is-scrolled) .NavMenuLink--chevron {
  background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2716%27 viewBox=%270 0 20 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 16L0 0H20L10 16Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
}

.Nav--primary:not(.is-scrolled) .NavMenu .Button--nav a {
  color: var(--colour-white);
}

.Nav--primary:not(.is-scrolled) .NavMenuItem[data-menu=panel] > .NavMenuLink:after {
  background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2716%27 viewBox=%270 0 20 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 16L0 0H20L10 16Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
}
.Nav--primary:not(.is-scrolled) .NavMenu--sub .NavMenuLink:after {
  background-image: url("data:image/svg+xml,%3Csvg width=%2717%27 height=%2714%27 viewBox=%270 0 17 14%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M9.65072 0.0234375L8.69738 0.928888L13.7507 5.87344H0.317383V7.17344H13.7507L8.69738 12.0959L9.65072 13.0234L16.3174 6.52344L9.65072 0.0234375Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
}
@media (min-width: 1080px) {
  .Nav--primary:not(.is-scrolled) .NavMenuItem[data-menu=panel] > .NavMenuLink:after {
    background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2716%27 viewBox=%270 0 20 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 16L0 0H20L10 16Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
  
  }
  .Nav--primary:not(.is-scrolled) .NavMenuItem[data-menu=panel]:hover > .NavMenuLink:after, .NavMenuItem--has-submenu:hover > .NavMenuLink:after {
    background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2716%27 viewBox=%270 0 20 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M10 16L0 0H20L10 16Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
  }
}