.checkbox-todo {
    --text: #414856;
    --check: #1E91EF;
    --disabled: #C3C8DE;
    --border-radius: 10px;
    border-radius: var(--border-radius);
    position: relative;
    display: grid;
    grid-template-columns: 30px auto;
    align-items: center;
}
  
@media (max-width: 600px) {
  .checkbox-todo {
      padding: 5px 5px 10px 5px;
  }
}

@media (min-width: 600px) {
  .checkbox-todo {
      padding: 5px;
  }
}

.checkbox-todo label {
    color: var(--text);
    position: relative;
    cursor: pointer;
    display: grid;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    transition: color 0.3s ease;
  }
  .checkbox-todo label::before,
  .checkbox-todo label::after {
    content: "";
    position: absolute;
  }
  .checkbox-todo label::before {
    height: 2px;
    width: 8px;
    left: -27px;
    background: var(--check);
    border-radius: 2px;
    transition: background 0.3s ease;
  }
  .checkbox-todo label:after {
    height: 4px;
    width: 4px;
    top: 8px;
    left: -25px;
    border-radius: 50%;
  }
  .checkbox-todo input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    height: 15px;
    width: 15px;
    outline: none;
    border: 0;
    margin: 0 15px 0 0;
    cursor: pointer;
    background: var(--background);
    display: grid;
    align-items: center;
  }
  .checkbox-todo input[type=checkbox]::before, .checkbox-todo input[type=checkbox]::after {
    content: "";
    position: absolute;
    height: 2px;
    top: auto;
    background: var(--check);
    border-radius: 2px;
  }
  .checkbox-todo input[type=checkbox]::before {
    width: 0px;
    right: 60%;
    transform-origin: right bottom;
  }
  .checkbox-todo input[type=checkbox]::after {
    width: 0px;
    left: 40%;
    transform-origin: left bottom;
  }
  .checkbox-todo input[type=checkbox]:checked::before {
    -webkit-animation: check-animation-1 0.4s ease forwards;
            animation: check-animation-1 0.4s ease forwards;
  }
  .checkbox-todo input[type=checkbox]:checked::after {
    -webkit-animation: check-animation-2 0.4s ease forwards;
            animation: check-animation-2 0.4s ease forwards;
  }
  .checkbox-todo input[type=checkbox]:checked + label {
    color: var(--disabled);
    -webkit-animation: move-keyframe 0.3s ease 0.1s forwards;
            animation: move-keyframe 0.3s ease 0.1s forwards;
  }
  .checkbox-todo input[type=checkbox]:checked + label::before {
    background: var(--disabled);
    -webkit-animation: slice-keyframe 0.4s ease forwards;
            animation: slice-keyframe 0.4s ease forwards;
  }
  .checkbox-todo input[type=checkbox]:checked + label::after {
    -webkit-animation: check-animation-3 0.5s ease forwards 0.1s;
            animation: check-animation-3 0.5s ease forwards 0.1s;
  }

  @-webkit-keyframes move-keyframe {
    50% {
      padding-left: 8px;
      padding-right: 0px;
    }
    100% {
      padding-right: 4px;
    }
  }

  @keyframes move-keyframe {
    50% {
      padding-left: 8px;
      padding-right: 0px;
    }
    100% {
      padding-right: 4px;
    }
  }
  @-webkit-keyframes slice-keyframe {
    60% {
      width: 100%;
      left: 4px;
    }
    100% {
      width: 100%;
      left: -2px;
      padding-left: 0;
    }
  }
  @keyframes slice-keyframe {
    60% {
      width: 100%;
      left: 4px;
    }
    100% {
      width: 100%;
      left: -2px;
      padding-left: 0;
    }
  }
  @-webkit-keyframes check-animation-1 {
    0% {
      width: 4px;
      top: auto;
      transform: rotate(0);
    }
    50% {
      width: 0px;
      top: auto;
      transform: rotate(0);
    }
    51% {
      width: 0px;
      top: 8px;
      transform: rotate(45deg);
    }
    100% {
      width: 5px;
      top: 8px;
      transform: rotate(45deg);
    }
  }
  @keyframes check-animation-1 {
    0% {
      width: 4px;
      top: auto;
      transform: rotate(0);
    }
    50% {
      width: 0px;
      top: auto;
      transform: rotate(0);
    }
    51% {
      width: 0px;
      top: 8px;
      transform: rotate(45deg);
    }
    100% {
      width: 5px;
      top: 8px;
      transform: rotate(45deg);
    }
  }
  @-webkit-keyframes check-animation-2 {
    0% {
      width: 4px;
      top: auto;
      transform: rotate(0);
    }
    50% {
      width: 0px;
      top: auto;
      transform: rotate(0);
    }
    51% {
      width: 0px;
      top: 8px;
      transform: rotate(-45deg);
    }
    100% {
      width: 10px;
      top: 8px;
      transform: rotate(-45deg);
    }
  }
  @keyframes check-animation-2 {
    0% {
      width: 4px;
      top: auto;
      transform: rotate(0);
    }
    50% {
      width: 0px;
      top: auto;
      transform: rotate(0);
    }
    51% {
      width: 0px;
      top: 8px;
      transform: rotate(-45deg);
    }
    100% {
      width: 10px;
      top: 8px;
      transform: rotate(-45deg);
    }
  }
  @-webkit-keyframes check-animation-3 {
    0% {
      opacity: 1;
      box-shadow: 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF;
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      box-shadow: 0 -15px 0 0px #1E91EF, 14px -8px 0 0px #1E91EF, 14px 8px 0 0px #1E91EF, 0 15px 0 0px #1E91EF, -14px 8px 0 0px #1E91EF, -14px -8px 0 0px #1E91EF;
    }
  }
  @keyframes check-animation-3 {
    0% {
      opacity: 1;
      box-shadow: 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF, 0 0 0 -2px #1E91EF;
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      box-shadow: 0 -15px 0 0px #1E91EF, 14px -8px 0 0px #1E91EF, 14px 8px 0 0px #1E91EF, 0 15px 0 0px #1E91EF, -14px 8px 0 0px #1E91EF, -14px -8px 0 0px #1E91EF;
    }
  }