.todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;

  label {
    cursor: pointer;
  }

  input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    position: relative;

    &:checked {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }

    &:checked::after {
      content: "✓";
      position: absolute;
      color: var(--color-text);
      font-size: 14px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &:checked+label {
      text-decoration: line-through;
      color: var(--color-border);
    }
  }
}