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

.open-search {
  @include a11y-card-link('.open-search__btn', true);
  align-items: center;
  display: flex;
  gap: spacer('xs');

  &__icon {
    --size: 1rem;
    block-size: var(--size);
    color: color('icon', 'search');
    inline-size: var(--size);
  }
}

<span class="open-search">
    <svg class="open-search__icon" aria-hidden="true" focusable="false" height="24" role="img" style="fill: currentColor" viewBox="0 0 24 24" width="24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <path d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z"></path>
    </svg>
    <span class="open-search__caption">Search</span>
    <button class="btn btn--outline-primary btn--sm open-search__btn" data-action="open-search">Ctrl K</button>
</span>