Botão Concluir sendo riscado junto com a tarefa

Pessoal, meus botões de concluir e deletar estão ficando riscados quando eu clico em concluir e não acho o problema. Precisei criar no style.css uma classe .done sozinha pra conseguir fazer a tarefa ser riscada, mas com isso os botões estão sendo riscados juntos.

( () => {

    const criarTarefa = (evento) => {

    evento.preventDefault ()

    const lista = document.querySelector('[data-list]')
    const input = document.querySelector('[data-form-input]')
    const valor = input.value 

    const tarefa = document.createElement('li')
    tarefa.classList.add('task')
    const conteudo = `<p class = "content">${valor}</p>`

    tarefa.innerHTML = conteudo
    tarefa.appendChild(BotaoConclui())
    tarefa.appendChild (BotaoDeleta())
    lista.appendChild(tarefa)
    input.value = " "
 }

 const novaTarefa = document.querySelector('[data-form-button]')

 novaTarefa.addEventListener('click', criarTarefa )

 const BotaoConclui = () => {
    const botaoConclui = document.createElement('button')

    botaoConclui.classList.add('check-button')
    botaoConclui.innerText = 'concluir '
    botaoConclui.addEventListener('click', concluirTarefa)


    return botaoConclui
 }

 const concluirTarefa = (evento)=> {
    const botaoConclui = evento.target

    const tarefaCompleta = botaoConclui.parentElement

    tarefaCompleta.classList.toggle('done')
 }

    const BotaoDeleta = () => {
     const botaoDeleta = document.createElement('button')
     botaoDeleta.innerText = 'deletar'
     botaoDeleta.addEventListener('click',deletarTarefa ) 

    return botaoDeleta
}
    const deletarTarefa = (evento) => {
        const botaoDeleta = evento.target
        const tarefaCompleta = botaoDeleta.parentElement
        tarefaCompleta.remove()
    }

} )()

código CSS

body {
  margin: 0;
}

.app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
}

.todo-list {
  background-color: #0B2027;
  font-family: "Space Mono", monospace;
  padding: 1rem;
  min-width: 400px;
  min-height: 300px;
}

.title {
  border-bottom: 1px solid rgba(246, 241, 209, 0.5);
  font-size: 1.5rem;
  font-family: "BioRhyme", serif;
  color: #F6F1D1;
}

.form {
  display: flex;
  justify-content: center;
}

.form-input,
.form-button {
  border-radius: 0;
  padding: 0.75rem;
  font-size: 0.75rem;
}

.form-input {
  outline: none;
  background-color: #F6F1D1;
  border-color: rgba(255, 255, 255, 0.1);
}

.form-button {
  border: 1px;
  background: #F6F1D1;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: 0.25rem;
}

.form-button:hover {
  color: #F6F1D1;
  background: rgba(246, 241, 209, 0.1);
}

body {
  margin: 0;
}

.app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
}

.todo-list {
  background-color: #0B2027;
  font-family: "Space Mono", monospace;
  padding: 1rem;
  min-width: 400px;
  min-height: 300px;
}

.title {
  border-bottom: 1px solid rgba(246, 241, 209, 0.5);
  font-size: 1.5rem;
  font-family: "BioRhyme", serif;
  color: #F6F1D1;
}

.form {
  display: flex;
  justify-content: center;
}
.form-input, .form-button {
  border-radius: 0;
  padding: 0.75rem;
  font-size: 0.75rem;
}
.form-input {
  outline: none;
  background-color: #F6F1D1;
  border-color: rgba(255, 255, 255, 0.1);
}
.form-button {
  border: 1px;
  background: #F6F1D1;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: 0.25rem;
}
.form-button:hover {
  color: #F6F1D1;
  background: rgba(246, 241, 209, 0.1);
}

.list {
  padding: 0;
  list-style: none;
  width: 100%;
}

.task {
  background-color: rgba(255, 255, 255, 0.1);
  color: #F6F1D1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 1rem 3rem;
}

.check-button, .delete-button {
  background-color: #F6F1D1;
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  outline: none;
  border-radius: 2px;
  cursor: pointer;
  }

.task.done .check-button {
  background-color: #46494C;
  color: #F6F1D1;
}

.check-icon {
  display: block;
  padding: 1px;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 50%;
}

.task.done .check-icon {
  background-color: #0B2027;
}

.content {
  margin: 0;
}

.task.done {
  text-decoration:  line-through;
}