@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="https://ui.sprucecss.com/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="Menu">
                        <svg 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' class='btn__icon'>
                            <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 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 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' class='btn__icon'>
                        <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>