@use 'sprucecss/scss/spruce' as *;

.site-navigation {
  --inset-block-start: 6rem;

  &__btn {
    @include breakpoint('md') {
      display: none;
    }

    &[aria-expanded='true'] + ul {
      display: flex;
    }
  }

  ul {
    background-color: color('background');
    display: none;
    flex-direction: column;
    gap: spacer('s');
    inset: var(--inset-block-start) 0 auto 0;
    list-style: none;
    margin: 0;
    padding-block: 0 spacer('m');
    padding-inline: spacer-clamp('m', 'l');
    position: absolute;

    @include breakpoint('md') {
      align-items: center;
      background-color: transparent;
      display: flex !important;
      flex-direction: row;
      flex-wrap: wrap;
      gap: spacer('m');
      inset: auto;
      padding: 0;
      position: relative;
    }

    @include breakpoint('lg') {
      gap: spacer('l');
    }
  }

  li {
    margin-block: 0;
  }

  a {
    color: color('heading');
    text-decoration: none;

    &:hover {
      color: color('primary');
    }

    &[aria-current='page'] {
      font-weight: 700;
    }
  }
}

<nav class="site-navigation" aria-label="Site">
    <button class="btn btn--primary btn--icon site-navigation__btn" data-action="navigation-toggle" aria-controls="primary-menu" aria-expanded="false" aria-label="Main">
        <svg class="btn__icon" aria-hidden="true" focusable="false" role="img" height="24" style="fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;" viewBox="0 0 24 24" width="24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
            <path d="M24,19.6c0,-0.331 -0.269,-0.6 -0.6,-0.6l-20.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l20.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-22.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l22.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-15.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l15.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Z"></path>
        </svg>
    </button>
    <ul id="primary-menu" class="navigation-menu">
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Products</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>