Вадим

css media +

.bread-crumbs {
  justify-content: flex-end;
}

Ну а если через JS, то как-то так:

var crumbs = document.querySelector('.bread-crumbs')
crumbs.scrollLeft = crumbs.scrollWidth

Не жадничать с >
details > summary:before {}
details[open] > summary:before {}

По порядку:
1) Не совсем верно. Не рекомендуют оставлять дефолтный аутлайн. Рекомендуют менять стиль элемента, когда он в фокусе, чтобы пользователю было удобнее осуществлять навигацию и ориентироваться какой элемент в данный момент активный. И оставлять дефолтный аутлайн если Вы не хотите с этим заморачиваться.

2) Есть разные варианты. Вот из свежего: https://matthiasott.com/notes/focus-visible-is-here - тут Вы найдёте современное решение и как его распространить на старые браузеры.

Вариантов масса, но, пожалуй, лучшим в данном случае будет:
• сделать карточке display: flex; flex-direction: column;
• кнопке - margin-top: auto;
Профит - кнопка всегда прижата к низу карточки.

Таким образом, если у контейнера карточек так же стоит display: flex, то все карточки в рамках одной строки будут всегда одной высоты, и в рамках одной строки все кнопки будут на одном уровне. При этом в каждой карточке может быть любое количество текста.

Схлопывание margin на MDN
https://habr.com/ru/post/257327/

Или, например, нужны все элементы с шириной width: 200px.

Если вам в академических целях, то как-то так:

Array.prototype.filter.call(document.querySelectorAll('*'), function(element){
  const style = window.getComputedStyle(element).width
  return style && style === '200px'
})

Если в проект хотите это поставить, то я бы предложил Вам ,как минимум, не брать за это никаких денег.
А лучше ещё и заплатить заказчику и извиниться.

div - нет.
Максимум что можно это вставить значение какого-то html-атрибута через функцию attr.
Но даже если написать там хтмл, то вставится всё равно строкой.

Не добавляется потому что нельзя в одном addEventListenerписать два события.
click touch

А анимацию с помощью @keyframes
css:

.active{
    animation-name: toggle;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

@keyframes toggle{
  50% {transform: scale(0.7)}
  100% {transform: scale(1)}
}

js:

leftBtn.addEventListener('click', (evt) => {
    leftBtn.classList.add('active')
    setTimeout(()=>{
      leftBtn.classList.remove('active')
    }, 300)
})

Гуглится по запросу: многоуровневое меню css.
Например:
https://ruseller.com/lessons.php?id=1442&rub=2

Использовать селектор ~


Или создать модель в скрипте и по факту изменения значения в соответствующем инпуте генерировать разметку следующего вопроса и добавлять в dom.

Оставляю Вам рефакторинг и задание стилей

У вас тут не с sass проблема, а с css.
.active,.burder-menu__lines - Разделяете запятой. Вот оно так и получается.
А Вам нужно что-что типа такого:

.burger-menu
  &_active &__lines
    &::after
      content: 'after'
    &::before
      content: 'before'

А ещё у Вас опечатка в burder

В целом, всё на ваше усмотрение. Раньше для сеток вообще исопльзовали таблицы или float. Которые для этого не предназначены.
Однако, считается хорошим выбором чтобы использовать гриды для сеток\раскладок элементов, а флексы уже внутри блоков для выравнивания, порядка и тд. Когда нет чёткой сетки или она не нужна и тд.

свежак:
https://www.youtube.com/watch?v=ST1EvRemB_U

Гриды были созданы для сеток\раскладок.
А флексы для управления потоком элементов.

Опирайтесь на тз, браузерную поддержку и здравый смысл.

Итак, для этого вам понадобится:

1. Медиафайл, который доложен вот так вот выпрыгивать(картинка, анимация, да хоть видео)
   
2. Добавить этот медиа на страницу. и обернём его в div с классом, какой вашей душе угодно. Но лучше чтобы название намекало на суть элемента - что это какой-то выскакивающий блок. Скажем, toast(как тост из тостера)
   
3. Делаем ему position: fixed и размещаем с помощью right И bottom так, чтобы его не было видно на экране.(right и bottom - чтобы не зависеть от размера экрана и он всегда был в одном месте)
   
4. Так же опишем класс модификатор, например, toast_active, в котором будут стили отвечающие за позиционирование. Так, чтобы элемент было видно. То есть toast_active должны содержать такие bottom и right, чтобы элемент был на экране.
   
5. Ну и далее нужен элемент триггер - по нажатию который надо добавлять класс toast_active на наш элемент. Например, через js.
   
6. Внутри обработчика сделать таймер(setTImeout) на нужное вам время, через которое нужно скрыть этот элемент снова. В функции таймера убрать класс toast_active.
   
7. Если пропишете в классе .toast свойство transition для bottom, то будет ещё и плавно всплывать.
   
8. Профит
   

Если отвечать на поставленный вопрос - то после текста должен идти слот под эту иконку.
Пустой div, у которого и будет этот background указан.
Таким образом, div всегда будет идти строго за текстом. Вы сможете задать ему отступ от текста, размеры, и прочие стили.

div а не span просто потому что span всё таки обёртка для текста. А иконка это не текст.

<div style="width: 100%; background-color: #fff;">
  <button style="width: 100%;height: 50px;">
    Зарегистрироваться
    <div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
  </button>
</div>

Не совсем понятно что именно нужно подсветить.
• Если саму ссылку, на которую нужно нажать, то тут либо через css анимации(transition/keyframes), однако анимация будет зависеть от наличия конкретного состояния(наведение, focus и тд), либо же через JS. Суть та же, однако можно не зависеть от состояния, включать анимацию и выключать по таймеру. А так же есть дополнительные варианты, такие как обработчик нажатия на ссылку.
• Если цель ссылки, на которую она указывает, то тут, в целом, варианты те же. Однако, через css, например, это можно сделать воспользовавшись псевдоклассом :target htmlbook.ru/css/target, либо через js брать назначение ссылки, искать этот элемент по id и так же навешивать анимацию.

Пример на :target, то есть если нужно подсветить цель ссылки:

#one {
  color: blue;
  background-color: transparent;
}

#one:target {
// и другие параметры анимации - направление, длительность, задержка и тд. 
// в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
  animation: blur 10s ease-in-out ... ;
}

@keyframes blur {
   // другие ключевые кадры
   50% {
     color: red;
     background-color: yellow;
   }
}

1. Целиком картинкой сделать фон(Плохой вариант)
   
2. Фоновый зелёный + через background-image задать этот круг(Должна быть отдельная картинка с этим кругом. Лучше svg) и правильно его спозиционировать с помощью соответствюущего свойства(background-position). Ваш вопрос разбирается в любой книжке про html\css, где есть глава про фоны.
   
3. Можно через радиальный градиент, как предлагали выше, однако учитывайте какая браузерная поддержка вам нужна. Работать будет не взеде.
   

Исходя из JS кода, а так же Ваших пояснений в комментариях к вопросу, предлагаю переоформить Ваше решение следующим образом:

• Скрываем css`ом все .lvl2
  
• Было бы так же хорошо поместить все .list в отдельный контейнер, чтобы не слушать весь документ. Если это возможно, конечно.
  
• Переписываем js слудующим образом:
  

$('.list-container').on('click', '.list', listClickHandler);

function listClickHandler(){
  $(this).next('.lvl2').slideToggle(); // this - элемент, на котором произошёл клик. Соответственно $(this) - его jQuery версия
}

.next()
.slideToggle()