#navigation-header {
  background-color: var(--gray-300);

  position: sticky;
  top: 0;

  height: 50px;
  margin: auto;
  padding: 0 1rem;
  z-index: 1;

  transition: background-color 0.2s ease-in-out;

  &.hide-navigation-header-bg {
    background: unset;

    a {
      color: var(--gray-300);
    }

    a:hover,
    a:focus {
      color: var(--primary);
    }
  }

  .navigation-container {
    align-items: center;
    display: flex;
    justify-content: space-between;

    height: inherit;
    margin: auto;
    max-width: 1080px;

    .navigation-header-primary-link {
      font-size: 1.25rem;
    }

    .navigation-header-menu {
      display: flex;
      gap: 1.15rem;
    }
  }

  a {
    color: var(--dark);
  }

  a:hover,
  a:focus {
    color: var(--primary);
  }
}