Помогите разобраться с html и css

Нужно сделать бургер который открывается и закрывается, код полностью скопировал с сайта, а теперь хочу разобраться, что за что отвечает. Не могли бы вы мне пояснить?

<div class="box">
    <div class="box__line"></div>
  </div>

.box.open .box__line {
  transform: translate(-100px, 0px);
  background: transparent;
}

const menuBtn = document.querySelector('.box')
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
})

Больше всего, мне не понятно, к чему обращаются .box.open .box__line в css и как к ним можно обратиться по другому