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

.site-header {
  position: relative;

  &__inner {
    --block-size: 6rem;
    align-items: center;
    block-size: var(--block-size);
    display: flex;
    flex-wrap: wrap;
    gap: spacer-clamp('s', 'l');
    justify-content: space-between;
  }

  &__column {
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: spacer-clamp('s', 'l');
  }

  &__actions {
    align-items: center;
    display: flex;
    gap: spacer-clamp('s', 'l');
  }

  &__logo {
    display: inline-flex;

    img {
      --size: 2rem;
      block-size: var(--size);
      inline-size: var(--size);
    }
  }

  &__email {
    display: none;
    text-decoration: none;

    @include breakpoint('sm') {
      display: inline-block;
    }
  }

  &__navigation {
    margin-inline-start: auto;

    @include breakpoint('md') {
      margin-inline-start: 0;
    }

    ul {
      border-block-start: 1px solid color('border');

      @include breakpoint('sm') {
        border-block: none;
      }
    }
  }
}

<header class="site-header">
    <div class="container">
        <div class="site-header__inner">
            <div class="site-header__column">
                <a class="site-header__logo" href="#">
                    <img src="/img/cone-logo.svg" alt="Cone" width="48" height="48"/>
                </a>
                <nav class="site-navigation site-header__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>
            </div>
            <div class="site-header__actions">
                <a class="site-header__email" href="mailto:hello@conedevelopment.com">hello@conedevelopment.com</a>
                <a class="btn btn--primary" href="#">
                    <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    Log in
                </a>
            </div>
        </div>
    </div>
</header>