Почему @extend placholder работает только с определенным элементом

Question

В scss у меня есть следующий код:

%cursor--pointer {
   cursor: pointer;
}

.drawer {
   &__item {
      @extend %cursor--pointer;
   }
}

Который должен выводить:

.drawer__item {
   cursor: pointer;
}

В HTML у меня есть следующие теги:

<a href="./" class="drawer__item"><span class="drawer__item__content">Home</span></a>

<div class="drawer__item"><span class="drawer__item__content">test</span></div>

Теперь я ожидаю, что при наведении курсора оба показывают указатель, а div - нет. При поиске в инструментах разработки cursor:pointer не событие там.

div:

a:

Стиль есть. Это просто не применяется:

Вкладка стилей показывает следующее. На вкладке стилей строки из предыдущего изображения не найдены.

Итак, мой вопрос: почему курсор установлен на теге a, а не на div? Полный код можно найти здесь .