<label>
  <input type="checkbox" />
  <span class="checkbox"></span>
</label>

<div id="result">Checked: false</div>

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap");

:root {
  --night: #0d0029;
  --lavender: #daa4f6;
  --yellow: #f9dc5c;
  --red: #e84855;
  --mint: #55deae;
}

body {
  font-family: "JetBrains Mono", monospace;
  font-size: 32px;
  font-weight: 800;
  height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2%;
  justify-content: center;
  align-items: center;
  color: var(--yellow);
  background-color: var(--night);
  transition: all 0.3s ease-in-out;
}

label{
  display: block;
  width: 150px;
  height: 150px;
  cursor: pointer;
}

input{
  position: absolute;
  transform: scale(0);
}

input:checked ~ .checkbox {
  transform: rotate(45deg);
  height: 125px;
  width: 50px;
  margin-left: 50px;
  border-color: green;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}

.checkbox{
  display: block;
  width: inherit;
  height: inherit;
  border: 3px solid #5e1286;
  border-radius: 6px;
  transition: ease-in 0.2s;
}

const input = Array.from(document.getElementsByTagName('input')).at(0);

const result =   document.getElementById('result');
input.addEventListener('input', () => {
  input.checked ? result.innerHTML = 'Checked: true' : result.innerHTML = 'Checked: false'
})